javascript - jQueryでは、名前属性で要素を選択するにはどうすればよいですか?

Question

以下のように、Web ページに 3 つのラジオボタンがあります。

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

jQuery で、これら 3 つのいずれかがクリックされたときに、選択したラジオボタンの値を取得したいと考えています。jQuery には id (#) セレクターとクラス (.) セレクターがありますが、以下のようにラジオボタンを名前で検索したい場合はどうすればよいでしょうか。

$("<radiobutton name attribute>").click(function(){});

この問題を解決する方法を教えてください。

score 344 · Accepted Answer

これでうまくいくはずです。これはすべてドキュメントにあり、これと非常によく似た例があります。

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

また、そのスニペットには同一の ID が複数あることに注意してください。これは無効な HTML です。ID ではなく、クラスを使用して一連の要素をグループ化します。それらは一意である必要があります。

score 187 · Accepted Answer

どのラジオボタンがチェックされているかを判断するには、次のことを試してください。

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

イベントはグループ内のすべてのラジオボタンに対してキャッチされ、選択されたボタンの値が val に配置されます。

更新: 投稿後、DOM トラバーサルが 1 つ少ないため、上記の Paolo の回答の方が優れていると判断しました。選択した要素をクロスブラウザー互換の方法で取得する方法を示しているため、この回答をそのままにしておきます。

score 39 · Accepted Answer

39

別の方法

$('input:radio[name=theme]').filter(":checked").val()

于 2013-11-30T05:34:57.843 に答える

score 20 · Accepted Answer

これは私にとって素晴らしい働きをします。たとえば、同じ「名前」を持つ2つのラジオボタンがあり、チェックされたボタンの値を取得したいだけです。これを試してみてください。

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

score 16 · Accepted Answer

次のコードは、選択したラジオボタンの値を名前で取得するために使用されます。

jQuery("input:radio[name=theme]:checked").val();

ありがとうアドナン

score 14 · Accepted Answer

本当に簡単なことをするためにライブラリを含めたくない人のために：

document.querySelector('[name="theme"]:checked').value;

jsfiddle

現在の回答のパフォーマンスの概要については、こちらを確認してください

score 13 · Accepted Answer

jQueryの1.7.2から1.8.2にアップグレードした後、エラーを調査していたときにこの質問を見つけました。jQuery 1.8以降に変更があり、この質問への回答方法が変更されたため、回答を追加しています。

jQuery 1.8では、:radio、:checkbox、:text などの疑似セレクターが非推奨になりました。

:radio上記を行うには、をに置き換えるだけ[type=radio]です。

したがって、あなたの答えは、jQuery 1.8 以降のすべてのバージョンで次のようになります。

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
});

1.8 の readmeとこの変更に固有のチケットで変更について読むことができます。また、[追加情報] セクションの:radio セレクターページで理由を理解することもできます。

score 9 · Accepted Answer

クリックイベントの前にデフォルトで選択されたラジオボタンの値を知りたい場合は、これを試してください:

alert($("input:radio:checked").val());

score 6 · Accepted Answer

以下のように、ページに複数のラジオグループがある場合は、フィルター機能を使用できます。

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

ここにフィドルのURLがあります

http://jsfiddle.net/h6ye7/67/

score 4 · Accepted Answer

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

score 3 · Accepted Answer

もしかしてこういうこと？

$("input:radio[name=theme]").click(function() { 
 ...
});

ラジオボタンをクリックすると、最終的に選択されると思うので、選択されたラジオボタンに対してこれが呼び出されます。

score 3 · Accepted Answer

同じページに複数のラジオボタンのグループがある場合は、これを試してラジオボタンの値を取得することもできます。

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

乾杯！

score 2 · Accepted Answer

CSS クラスを使用してラジオボタンの範囲を定義し、次を使用して値を決定することもできます。

$('.radio_check:checked').val()

score 1 · Accepted Answer

これは私のために働いた..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jクエリ:

    $(".radioClass").each(関数() {
        if($(this).is(':checked'))
        alert($(this).val());
    });

それが役に立てば幸い..

score 0 · Accepted Answer

0

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

于 2009-06-12T18:58:17.080 に答える

javascript - jQueryでは、名前属性で要素を選択するにはどうすればよいですか?

18 に答える 18

jsfiddle

Related

Reference