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

});

问题是：如果有多个输入＆＃34;对＆＃34;在我的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

您可以使用 $结尾的属性选择器。

因此，$item['id']将会是什么意思，你仍然可以找到他们的结尾a或b，依此类推。

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

然后，只需使用slice()抓取 ID号部分，它就像下面的示例一样简单

Stack snippet

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

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

为您的表单提供一个ID，并为您的所有输入提供一个类，以便您可以像这样为所有人设置一个事件：

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

 });

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

如果我理解正确，你将永远拥有＆＃34; .a＆＃34;或＆＃34; .b＆＃34;在名称的末尾，所以你可以使用带选择器的结尾：

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

您现在只搜索名称的后缀。

动态地在输入上应用JavaScript

5 个答案: