cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery中实现全选，反选实例代码 （推荐）

jQuery中实现全选，反选实例代码 （推荐）

怪我咯
怪我咯asal
2017-03-30 09:27:271541semak imbas

1.概述

在项目中经常遇到列表中对复选框进行勾选操作，全选。。。反选。。

2. example

<html>
<body>
<form id="test-form" action="test">
<legend>请选择想要学习的编程语言：</legend>
<fieldset>
<p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
<p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
<p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
<p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
<p><button type="submit">Submit</button></p>
</fieldset>
</form>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
(function(){
var
form = $(&#39;#test-form&#39;),
langs = form.find(&#39;[name=lang]&#39;),
selectAll = form.find(&#39;label.selectAll :checkbox&#39;),
selectAllLabel = form.find(&#39;label.selectAll span.selectAll&#39;),
deselectAllLabel = form.find(&#39;label.selectAll span.deselectAll&#39;),
invertSelect = form.find(&#39;a.invertSelect&#39;);
// 重置初始化状态:
form.find(&#39;*&#39;).show().off();
form.find(&#39;:checkbox&#39;).prop(&#39;checked&#39;, false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
});
var count = 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(&#39;click&#39;, function(){
langs.map(function(){
$(this).prop(&#39;checked&#39;, !this.checked);
});
});
})();
});
</script>
</body>
</html>


Atas ialah kandungan terperinci jQuery中实现全选，反选实例代码 （推荐）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript中一些常用的正则表达式使用总结Artikel seterusnya：解析AngularJS 作用域及使用示例代码

Artikel berkaitan

Lihat lagi