ホームページ > 記事 > ウェブフロントエンド > すべてのチェックボックスを選択し、すべてのチェックボックスを選択解除する jQuery の操作
すべてのチェックボックスを選択し、すべてのチェックボックスを選択解除する jQuery の操作
- 高洛峰オリジナル
- 2017-02-06 13:09:05990ブラウズ
まずレンダリングをお見せします。気に入ったら、引き続き実装コードを参照してください。
HTML コード:
<body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li> <li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li> <li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li> <li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li> <li><label><input type="checkbox" name="items" value="6"> 6.喜欢妳</label></li> </ul> <input type="checkbox" id="all"> 全选/全不选</br> <input type="button" value="全选" class="btn" id="selectAll"> <input type="button" value="全不选" class="btn" id="unSelect"> <input type="button" value="反选" class="btn" id="reverse"> <input type="button" value="获得选中的所有值" id="btn" id="getValue"> </body>
jquery コード:
<script type="text/javascript">
$(function(){
//全选/全不选
$("#all").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})
//全选
$("#selectAll").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",true);
});
});
//全不选
$("#unSelect").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",false);
});
});
//反选
$("#reverse").click(function(){
$("[name=items]:checkbox").each(function(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$("#btn").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>
注: jquery のバージョンが変更されたため、新しいバージョンは 1 回しかクリックできません。古いバージョンは問題ありません。新しいバージョンでは、選択された状態を設定するために attr を使用できません。最初の解決策は、JS ネイティブ メソッド this.checked=true/false; を使用することです。
2 つ目の解決策は、attr を prop に置き換えることです。
上記は、エディターが紹介するすべてのチェックボックスを選択し、すべてのチェックボックスを選択解除する jQuery 操作です。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。みんな。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。
すべてのチェックボックスを選択およびすべてのチェックボックスを選択解除する操作に関するその他の jQuery 関連記事については、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。