jQuery 全选 全部选 反选 实现代码
1.概述
在项目中经常遇到列表中对复选框进行勾选操作，全选。。。反选。。
2.example
<html>
<body>
<formid="test-form"action="test">
<legend>请选择想要学习的编程语言：</legend>
<fieldset>
<p><labelclass="selectAll"><inputtype="checkbox"><spanclass="selectAll">全选</span><spanclass="deselectAll">全不选</span></label><ahref="#0"class="invertSelect">反选</a></p>
<p><label><inputtype="checkbox"name="lang"value="javascript">JavaScript</label></p>
<p><label><inputtype="checkbox"name="lang"value="python">Python</label></p>
<p><label><inputtype="checkbox"name="lang"value="ruby">Ruby</label></p>
<p><label><inputtype="checkbox"name="lang"value="haskell">Haskell</label></p>
<p><label><inputtype="checkbox"name="lang"value="scheme">Scheme</label></p>
<p><buttontype="submit">Submit</button></p>
</fieldset>
</form>
<scriptsrc="jquery-3.1.0.js"></script>
<scripttype="text/javascript">
$(function(){
(function(){
var
form=$('#test-form'),
langs=form.find('[name=lang]'),
selectAll=form.find('label.selectAll:checkbox'),
selectAllLabel=form.find('label.selectAllspan.selectAll'),
deselectAllLabel=form.find('label.selectAllspan.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());
});
varcount=1;//点击全选/全不选框次数
selectAll.click(function(){
if(count++%2){
selectAllLabel.hide();
deselectAllLabel.show();
$(this).prop("checked",false);
langs.prop("checked",true);
}else{
selectAllLabel.show();
deselectAllLabel.hide();
$(this).prop("checked",false);
langs.prop("checked",false);
}
});
invertSelect.on('click',function(){
langs.map(function(){
$(this).prop('checked',!this.checked);
});
});
})();
});
</script>
</body>
</html>
以上所述是小编给大家介绍的jQuery全选全部选反选实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！