Beispielcode zum Auswählen aller und zum Umkehren der Auswahl in jQuery (empfohlen)-js-Tutorial-php.cn

Beispielcode zum Auswählen aller und zum Umkehren der Auswahl in jQuery (empfohlen)

怪我咯

Freigeben： 2017-03-30 09:27:27

Original

1577 Leute haben es durchsucht

1. Übersicht

In Projekten stoßen wir häufig auf die Kontrollkästchenoperation in der Liste, Alle auswählen. . . Gegenwahl. .

2. Beispiel

<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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode zum Auswählen aller und zum Umkehren der Auswahl in jQuery (empfohlen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!