Динамически применять JavaScript на входах

Question

У меня есть форма:

<form name="test">
<input type="radio" required="required" name="a" value="1">1
<input type="radio" required="required" name="a" value="X">X
<input type="radio" required="required" name="a" value="2">2
<br />
<input type="radio" required="required" name="b" value="1">1
<input type="radio" required="required" name="b" value="2">2
</form>

Это моя цель:

If a=1 then b=1
If a=X then unset b
If a=2 then b=2

Вот как я этого добиваюсь:

$('input[name="a"]').on('change', function() {
  var selected = $('input[name="a"]:checked').val();
  if (selected == "X") {
    $('input[name="b"]:checked').prop("checked", false);
    return false;
  }
  $('input[name="b"][value="' + selected + '"]').prop("checked", true);

});

Вопросэто: что если в моем form есть несколько входных «пар», а имя динамически устанавливается следующим образом:

<form name="test">
<?php
  foreach($arr as $item) {
  $input = '
    <input type="radio" required="required" name="'$item['id'].'a" value="1">1
    <input type="radio" required="required" name="'$item['id'].'a" value="X">X
    <input type="radio" required="required" name="'$item['id'].'a" value="2">2
    <br />
    <input type="radio" required="required" name="'$item['id'].'b" value="1">1
    <input type="radio" required="required" name="'$item['id'].'b" value="2">2
  ';
  echo($input);
}
?>
</form>

Как я могу применить один и тот же JavaScript для обработки всех из них?

Answer 1

Если я правильно понимаю, у вас всегда будет ".a" или ".b" в конце имени, поэтому вы можете использовать концы с селектором:

$('input[name=$".a"]').on('change', function() {
var selected = $('input[name=$".a"]:checked').val();
if (selected == "X") {
$('input[name=$".b"]:checked').prop("checked", false);
return false;
}
$('input[name=$".b"][value="' + selected + '"]').prop("checked", true);
});

, который вы сейчас ищететолько постфикс имени.

Answer 2

Это должно работать, https://jsfiddle.net/o2gxgz9r/47544/

Я меняю ID 144a / 144b для этого примера.

HTML:

<form name="test">
<input type="radio" required="required" name="144a" value="1">1
<input type="radio" required="required" name="144a" value="X">X
<input type="radio" required="required" name="144a" value="2">2
<br />
<input type="radio" required="required" name="144b" value="1">1
<input type="radio" required="required" name="144b" value="2">2
</form>

js:

$('input').on('change', function(event) {
 if(event.target.name.slice(-1) == 'a'){
 var nameA = event.target.name;
 var nameB = event.target.name.slice(0, -1) + 'b';
  var selected = $('input[name='+nameA+']:checked').val();
  if (selected == "X") {
    $('input[name='+nameB+']:checked').prop("checked", false);
    return false;
  }
  $('input[name='+nameB+'][value="' + selected + '"]').prop("checked", true);
}
});

Answer 3

Вы можете использовать селектор атрибутов , заканчивающийся $.

. При этом не имеет значения, каким будет $item['id'], вы все равно найдете их с окончаниемa или b и т. Д.

$('input[name$="a"]').on('change', function() {...});

Затем, просто возьмите идентификационную часть номера , используя slice(), получите все просто, как показано ниже:

Фрагмент стека

$('input[name$="a"]').on('change', function() {
  var selected = $(this),
      val = selected.val(),
      id = selected.attr('name').slice(0,-1);
  if (val == "X") {
    $('input[name="'+id+'b"]:checked').prop("checked", false);
    return false;
  }
  $('input[name="'+id+'b"][value="' + val + '"]').prop("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="test">
<input type="radio" required="required" name="1a" value="1">1
<input type="radio" required="required" name="1a" value="X">X
<input type="radio" required="required" name="1a" value="2">2
<br />
<input type="radio" required="required" name="1b" value="1">1
<input type="radio" required="required" name="1b" value="2">2
<br /><br />
<input type="radio" required="required" name="2a" value="1">1
<input type="radio" required="required" name="2a" value="X">X
<input type="radio" required="required" name="2a" value="2">2
<br />
<input type="radio" required="required" name="2b" value="1">1
<input type="radio" required="required" name="2b" value="2">2
</form>

Answer 4

Вы можете назначить общий класс для всех флажков, а также использовать itemId для группы радиоустройств с уникальной идентификацией.

<form name="test">
<?php
foreach($arr as $item) {
 $input = '
<input type="radio" class="radioBox" required="required" 
name="'$item['id'].'_a" value="1">1
<input type="radio" class="radioBox" required="required" name="'$item['id'].'_a" value="X">X
<input type="radio" class="radioBox" required="required" 
name="'$item['id'].'_a" value="2">2
<br />
<input type="radio" class="radioBox" required="required" 
 name="'$item['id'].'_b" value="1">1
<input type="radio" class="radioBox" required="required" 
name="'$item['id'].'_b" value="2">2
';
echo($input);
}
?>
</form>

$('form').on('change','.radioBox', function() {
  var selected = $(this).val();
  var ItemId=$(this).attr('name').split("_")[0];//get item id
  if (selected == "X") {
    $('input[name="'+ItemId+'_b"]:checked').prop("checked", false);//use item id for b
    return false;
  }
  $('input[name="'+ItemId+'_b"][value="' + selected + '"]').prop("checked", true);

});

Answer 5

Дайте идентификатор вашей форме и класс для всех ваших входных данных, чтобы вы могли затем установить событие для всех них следующим образом:

 $("#formID").on('change', '.input-class-a', function()
 {
        //stuff to do

 });