无法按值查看单选按钮，需要使用Javascript进行验证/ jquery

Question

我需要一个帮助。我需要通过获取id来验证单选按钮，并验证那些使用Javascript/Jquery。我在下面解释我的代码。

<div> 
    <input type="radio" name="rd0" value="57db18">Raj 
    <input type="radio" name="rd0" value="57da17">Rahul 
    <input type="radio" name="rd0" value="57db19">Mona 
</div> 
<br> 
<br> 
<div> 
    <input type="radio" name="rd1" value="57db18">A 
    <input type="radio" name="rd1" value="57da17">B 
    <input type="radio" name="rd1" value="57db19">C 

</div> 
<br> 
<br> 
<div > 
    <input type="radio" name="rd2" value="57db18">Apple 
    <input type="radio" name="rd2" value="57da17">Orange 
    <input type="radio" name="rd2" value="57db19">Mango 

</div> 
    <span> 
     <button type="button" id="btn" name="btn" onclick="setValue()">Set</button> 
    </span> 
    <span> 
     <button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button> 
    </span> 

在这里，我有3个组单选按钮，当用户点击按钮set单选按钮应该在一个循环中检查按给定值。脚本部分如下。

var valu = ['57da17', '57db18', '57db19']; 
function setValue(){ 
    for(var i=0;i<valu.length;i++){ 
     $('#rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true); 
     console.log('checked btn',$('#rd'+i).is(':checked')); 
    } 
} 

，但在当前的情况下，它不会发生。当用户还将点击validate按钮，就应该检查所有单选按钮被选中或not.Please帮助我。

Answer 1

试试这个：

$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true)

var valu = ['57da17', '57db18', '57db19']; 
 
function setValue(){ 
 
    for(var i=0;i<valu.length;i++){ 
 
      
 
     $('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true); 
 
     console.log('checked btn',$('input[name=rd' + i + ']').is(':checked')); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="radio" name="rd0" value="57db18">Raj 
 
    <input type="radio" name="rd0" value="57da17">Rahul 
 
    <input type="radio" name="rd0" value="57db19">Mona 
 
</div> 
 
<br> 
 
<br> 
 
<div> 
 
    <input type="radio" name="rd1" value="57db18">A 
 
    <input type="radio" name="rd1" value="57da17">B 
 
    <input type="radio" name="rd1" value="57db19">C 
 

 
</div> 
 
<br> 
 
<br> 
 
<div > 
 
    <input type="radio" name="rd2" value="57db18">Apple 
 
    <input type="radio" name="rd2" value="57da17">Orange 
 
    <input type="radio" name="rd2" value="57db19">Mango 
 

 
</div> 
 
    <span> 
 
     <button type="button" id="btn" name="btn" onclick="setValue()">Set</button> 
 
    </span> 
 
    <span> 
 
     <button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button> 
 
    </span>

Answer 2

您正在通过ID（带“＃”）选择无线电btns，但没有ID。 您应该按名称选择它们。

使用jQuery名称选择是这样的：

var valu = ['57da17', '57db18', '57db19']; 
function setValue(){ 
    for(var i=0;i<valu.length;i++){ 
     $('input[name=rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true); 
     console.log('checked btn',$('input[name=rd'+i+']').is(':checked')); 
    } 
} 

Answer 3

您指定一个无效的选择 - #是id选择器。

合并多个这样的过滤器$(input[name=""][value=""]。检查下面的例子。

$(function() { 
 
    var valu = ['57da17', '57db18', '57db19']; 
 

 
    $('#btn').click(function() { 
 
    for (var i = 0; i < valu.length; i++) { 
 
     $('input[name="rd' + i + '"][value="' + valu[i] + '"]').prop('checked', true); 
 
    } 
 
    }); 
 

 
    $('#vbtn').click(function() { 
 
    for (var i = 0; i < valu.length; i++) { 
 
     console.log('checked btn', $('input[name="rd' + i + '"]').is(':checked')); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="radio" name="rd0" value="57db18">Raj 
 
    <input type="radio" name="rd0" value="57da17">Rahul 
 
    <input type="radio" name="rd0" value="57db19">Mona 
 
</div> 
 
<br> 
 
<br> 
 

 
<div> 
 
    <input type="radio" name="rd1" value="57db18">A 
 
    <input type="radio" name="rd1" value="57da17">B 
 
    <input type="radio" name="rd1" value="57db19">C 
 
</div> 
 
<br> 
 
<br> 
 

 
<div> 
 
    <input type="radio" name="rd2" value="57db18">Apple 
 
    <input type="radio" name="rd2" value="57da17">Orange 
 
    <input type="radio" name="rd2" value="57db19">Mango 
 
</div> 
 

 
<span> 
 
    <button type="button" id="btn" name="btn">Set</button> 
 
</span> 
 

 
<span> 
 
    <button type="button" id="vbtn" name="vbtn">Validate</button> 
 
</span>

Answer 4

验证，在-至少一个无线电应当从每个组进行检查。

var valu = ['57da17', '57db18', '57db19']; 
 
function setValue(){ 
 
    for(var i=0;i<valu.length;i++){ 
 
    $('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true); 
 
    
 
    } 
 
} 
 
function validateRadioButtonValue(){ 
 
    for(var i=0;i<valu.length;i++){ 
 
     if(!$('input[name="rd'+i+'"]').is(":checked")) 
 
     { 
 
     alert("Please select checkbox named "+"rd"+i); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="radio" name="rd0" value="57db18">Raj 
 
    <input type="radio" name="rd0" value="57da17">Rahul 
 
    <input type="radio" name="rd0" value="57db19">Mona 
 
</div> 
 
<br> 
 
<br> 
 
<div> 
 
    <input type="radio" name="rd1" value="57db18">A 
 
    <input type="radio" name="rd1" value="57da17">B 
 
    <input type="radio" name="rd1" value="57db19">C 
 
</div> 
 
<br> 
 
<br> 
 
<div> 
 
    <input type="radio" name="rd2" value="57db18">Apple 
 
    <input type="radio" name="rd2" value="57da17">Orange 
 
    <input type="radio" name="rd2" value="57db19">Mango 
 
</div> 
 
    <span> 
 
     <button type="button" id="btn" name="btn" onclick="setValue()">Set</button> 
 
    </span> 
 
    <span> 
 
     <button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button> 
 
    </span>