Exemple de code pour tout sélectionner et inverser la sélection dans jQuery (recommandé)-js tutoriel-php.cn

Exemple de code pour tout sélectionner et inverser la sélection dans jQuery (recommandé)

怪我咯

Libérer： 2017-03-30 09:27:27

original

1577 Les gens l'ont consulté

1. Aperçu

Dans les projets, nous rencontrons souvent l'opération de case à cocher dans la liste, sélectionnez tout. . . Contre-élection. .

2. exemple

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!