jQuery_jqueryでのチェックボックス選択項目の取得などの操作と注意事項-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:12 PM

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 () {
;

完全なテスト デモ コードを添付します: 

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

                //$("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');
                    }
                });
            });
        });