web-dev-qa-db-ja.com

javascriptが選択したラジオ

選択したラジオ入力を確認したい。

これが私のコードです。

<input name="u_type" type="radio" value="staff" id="u_type" checked="checked" /> Staff
<input name="u_type" type="radio" value="admin" id="u_type" /> Admin
<input id="add_user" name="add_user" type="button" onclick="addUser();"  value="Add" class="submitButton admin_add" />

function addUser()
{
//how to check what is the selected radio input
}

ありがとう。

13
Sasindu H
function addUser() {
    //how to check what is the selected radio input
    alert(getCheckedRadioValue('u_type'));
}

function getCheckedRadioValue(name) {
    var elements = document.getElementsByName(name);

    for (var i=0, len=elements.length; i<len; ++i)
        if (elements[i].checked) return elements[i].value;
}

また、要素のIDは異なっている必要があります。

21
Roman Sklyarov

JQueryを使用せずに、チェックされたラジオボタンの値を取得するには:

var radios = document.getElementsByName("u_type");
for(var i = 0; i < radios.length; i++) {
    if(radios[i].checked) selectedValue = radios[i].value;   
}

selectedValueが他の場所で宣言された変数であると仮定します)

6
James Allardice
$('input[name=u_type]:checked').val()

選択したオプションの値を取得します。もちろん、変数に割り当てることができます。注意点として、これはjqueryであり、DOM操作を簡単にし、ブラウザー間の互換性に優れた便利なjavascriptライブラリであることも指摘しておく必要があります。それは見つけることができます ここ

4
kinakuta

Kmb385の提案の代わりに、入力をフォームでラップし、すべての入力名が異なる(2つのu_typeがある)名前であることを確認することもできます。

次に、document.formname.inputname.checkedとして入力にアクセスできます。これにより、trueまたはfalseが返されます。

1
jsonnull

これは古い質問だと思いますが、答えは複雑すぎるようです。

前に指摘したように、同じIDを持つ2つの要素を使用しないでください。これはhtml仕様に違反しています。 id属性を削除するか、2つの異なる値にします。次に、これを使用してチェック値を取得します。

document.querySelector("input[type='radio'][name='u_type']:checked").value

1
spekary

同じIDを持つ2つの無線要素を使用しないでください。 IDの1つを変更してから、次のように両方のラジオボタンを確認する必要があります。

if(document.getElementById("u_type").checked == true)
{
   //do something
}

ネイティブjsの代わりにjqueryを使用してこれを行うことをお勧めします。

0
Kevin Bowersox