Не удалось проверить переключатель в соответствии с значением и выполнить проверку с помощью Javascript/Jquery

Мне нужна помощь. Мне нужно проверить переключатель в соответствии с значением, взяв идентификатор и проверить его с помощью 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, он должен проверить, что все переключатели отмечены или нет. Пожалуйста, помогите мне.

Ответ 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>

Ответ 2

Вы выбираете радио btns по идентификатору (с "#" ), в то время как у них нет идентификатора. Вы должны выбрать их по имени.

При выборе имени 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') );
    }
}

Ответ 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>

Ответ 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>