recherche

Maison >interface Web >js tutoriel >Exemple de code pour tout sélectionner et inverser la sélection dans jQuery (recommandé)

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

怪我咯
怪我咯original
2017-03-30 09:27:271589parcourir

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>


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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé de quelques expressions régulières couramment utilisées en JavaScriptArticle suivant：Résumé de quelques expressions régulières couramment utilisées en JavaScript

Articles Liés

Voir plus