すべてのチェックボックスを選択し、すべてのチェックボックスを選択解除する jQuery の操作-jsチュートリアル-php.cn

すべてのチェックボックスを選択し、すべてのチェックボックスを選択解除する jQuery の操作

高洛峰

リリース： 2017-02-06 13:09:05

オリジナル

1015 人が閲覧しました

まずレンダリングをお見せします。気に入ったら、引き続き実装コードを参照してください。

jQuery对checkbox 复选框的全选全不选反选的操作

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 サイトに注目してください。