無法按值查看單選按鈕，需要使用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>