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

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

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

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

id="in1" selected="checked" /> ;1 年生
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 () {</script>

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

                $('#show').html("");
                $("input[name='abc'][checked]").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

            //获取选中项
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

            //全选/取消全选
            $('#quanxuan').toggle(function () {
                $("input[name='abc']").attr("checked", 'true');
            }, function () {
                $("input[name='abc']").removeAttr("checked");
            });

            //反选
            $('#fanxuan').click(function () {
                $("input[name='abc']").each(function () {
                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");
                    } else {
                        $(this).attr("checked", 'true');
                    }
                });
            });
        });

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

子供