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按钮时，它应该验证是否检查了所有单选按钮。请帮助我。

Answer 1

您正在按ID（使用＆＃34;＃＆＃34;）选择收音机btns，而他们没有ID。您应该按名称选择它们。

使用jQuery名称select是这样的：

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 2

试试这个：

$('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 3

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

合并多个过滤器，例如$(input[name=""][value=""]。请查看以下示例。

＆＃13;

$(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'));
    }
  });
});

＆＃13;

<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>

＆＃13;

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>

无法按照值检查单选按钮，需要使用Javascript / Jquery进行验证

4 个答案: