ホームページ ウェブフロントエンド jsチュートリアル jQuery_jqueryでのチェックボックス選択項目の取得などの操作と注意事項

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

May 16, 2016 pm 05:12 PM
jquery

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

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

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


id="in1" selected="checked" /> ;


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>




🎜>
< input type="checkbox" name="abc" value="3 年生" id="in3" />



" value="7 年生" id="in7" />

;input type="button" id="huoqu" value="選択したアイテムを取得 (FF と chrome では無効)" />
/すべての選択をキャンセルs" / &gt;
"選択したアイテムを取得" /&gt;

子供

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

徹底した分析: jQuery の長所と短所

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles