jQuery_jqueryでのチェックボックス選択項目の取得などの操作と注意事項

1. チェックボックスの選択された項目を取得します
2. すべてを選択し、チェックボックスのオプションを選択解除します

テスト用のチェックボックス コード スニペット:

コードをコピーします コードは次のとおりです:

id="in1" selected="checked" /> ; 2 年生
3 年生学年
4年生 5 年生
label for="in6">6 年生

>8 年生

1: まず最初のポイント、チェックボックスの選択された項目の取得について説明します。インターネット上にあるほとんどのメソッドは、それぞれを使用して以下を取得します:

コードをコピー コードは次のとおりです。

$("input[name='checkbox '][checked]").each(function () {
alert(this.value);
})

しかし、テスト中に問題が発生しました。このメソッドは次の環境で動作します。 IE Firefox および Chrome ブラウザでは取得できますが、現在選択されている項目は Firefox および Chrome ブラウザでは取得できません。 テスト結果は次のとおりです:

IE でのテスト結果 (私の場合は IE10):

IE10 での効果:

Chrome ブラウザでの効果:

Google で検索して理由を見つけました:

Web サイト: 選択されている入力 CheckBox の数に関する JQuery の質問。IE は正常ですが、FF と Chrome は値を取得できません

私が使用している jquery のバージョンは 1.7.2 なので、それを取得するには :checked を使用する必要があります:

コードをコピー コードは次のとおりです:

//選択された項目を取得します
huoqu2').click(function () {
} ;

クロムでの効果:

2: すべてのチェックボックスを選択し、選択操作を反転します:

これら 2 つは比較的単純なので、コードに直接進みます。

コードをコピー コードは次のとおりです:

//すべて選択/すべて選択解除
('#quanxuan').toggle(function () {

$("input[name='abc']").removeAttr("checked");
});

もう一度要約すると、

jqueryのバージョンが1.3より前の場合、チェックボックスの選択項目を取得する操作：





コードをコピー

コードは次のとおりです。

$("input[name='abc '][チェック済み]").each(function () {

;

jqueryのバージョンが1.3以降の場合、チェックボックスの選択項目を取得する操作：

コードをコピー

コードは次のとおりです:

selected").each(function () {
;
完全なテスト デモ コードを添付します:

コードをコピー コードは次のとおりです:

   
   
   

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

1 年生 🎜> 2 年生
< input type="checkbox" name="abc" value="3 年生" id="in3" />3 年生
4 年生
5 年生
6 年生
" value="7 年生" id="in7" />7 年生
中学2年生
;input type="button" id="huoqu" value="選択したアイテムを取得 (FF と chrome では無効)" />
/すべての選択をキャンセルs" / ＆gt;
"選択したアイテムを取得" /＆gt;

子供

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。