Discuss / JavaScript / jquery 表单事件 作业

jquery 表单事件 作业

Topic source

SpringShaw

#1 Created at ... [Delete] [Delete and Lock User]

```javascript

$(function () {

var

form = $('#test-form'),

langs = form.find('[name=lang]'),

selectAll = form.find('label.selectAll :checkbox'),

selectAllLabel = form.find('label.selectAll span.selectAll'),

deselectAllLabel = form.find('label.selectAll span.deselectAll'),

invertSelect = form.find('a.invertSelect');

// 重置初始化状态:

form.find('*').show().off();

form.find(':checkbox').prop('checked', false).off();

deselectAllLabel.hide();

// 拦截form提交事件:

form.off().submit(function (e) {

e.preventDefault();

alert(form.serialize());

});

//全选/全不选 checked事件

selectAll.on('change', function () {

var checked = $(this).prop("checked"); //当前checked状态

langs.each(function () {

$(this).prop("checked", checked); // 每种语言也checked

})

if (checked) { //两个label hide /show

selectAllLabel.hide();

deselectAllLabel.show();

} else {

deselectAllLabel.hide();

selectAllLabel.show();

}

});

langs.each(function () {

$(this).on('change', function () { //每个语言都绑定一下

// 检查 是否所有语言都选中 即

var allchecked = langs.toArray().every(function (lan) {  // 强行用一下  every

//return lan.getAttribute('checked'); // not chrome 坑

// return lan.checked; // chrome ok

return $(lan).prop('checked'); //jquery 兼容好了

})

if (allchecked) { //所有语言都选中, 代码点击下 select all

selectAll.prop('checked', true);

} else {

selectAll.prop('checked', false);

deselectAllLabel.hide();

selectAllLabel.show();

}

})

});

})

```


  • 1

Reply