1. チェックボックスの選択された項目を取得します
2. すべてを選択し、チェックボックスのオプションを選択解除します
テスト用のチェックボックス コード スニペット:
1: まず最初のポイント、チェックボックスの選択された項目の取得について説明します。インターネット上にあるほとんどのメソッドは、それぞれを使用して以下を取得します:
IE10 での効果:
Chrome ブラウザでの効果:
Google で検索して理由を見つけました:
Web サイト: 選択されている入力 CheckBox の数に関する JQuery の質問。IE は正常ですが、FF と Chrome は値を取得できません
私が使用している jquery のバージョンは 1.7.2 なので、それを取得するには :checked を使用する必要があります:
クロムでの効果:
2: すべてのチェックボックスを選択し、選択操作を反転します:
これら 2 つは比較的単純なので、コードに直接進みます。
もう一度要約すると、
jqueryのバージョンが1.3より前の場合、チェックボックスの選択項目を取得する操作：
コードをコピー
;
jqueryのバージョンが1.3以降の場合、チェックボックスの選択項目を取得する操作：コードは次のとおりです:
<script><br> $(function () {<br> //获取选中项(FF和chrome下无效)<br> $('#huoqu').click(function () {</p>
<p> //$("input[name='abc'][checked]").each(function () {<br> // alert(this.value);<br> //});</p>
<p> $('#show').html("");<br> $("input[name='abc'][checked]").each(function () {<br> //alert(this.value);<br> $('#show').append(this.value + " ");<br> });<br> });</p>
<p><br> //获取选中项<br> $('#huoqu2').click(function () {<br> $('#show').html("");<br> $("input[name='abc']:checked").each(function () {<br> //alert(this.value);<br> $('#show').append(this.value + " ");<br> });<br> });</p>
<p><br> //全选/取消全选<br> $('#quanxuan').toggle(function () {<br> $("input[name='abc']").attr("checked", 'true');<br> }, function () {<br> $("input[name='abc']").removeAttr("checked");<br> });</p>
<p><br> //反选<br> $('#fanxuan').click(function () {<br> $("input[name='abc']").each(function () {<br> if ($(this).attr("checked")) {<br> $(this).removeAttr("checked");<br> } else {<br> $(this).attr("checked", 'true');<br> }<br> });<br> });<br> });</p>
<p> </script>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
