Question

我有一个onChange事件附加到radiobutton组，但我只想在从非NULL状态切换到另一个非NULL状态时触发它。

有时我最初的情况是两个单选按钮都是空白的（该字段尚未设置）。

Radiobutton情景：

( ) Option1   ( ) Option 2
(x) Option1   ( ) Option 2
( ) Option1   (x) Option 2

代码：

$("input[name='indicator']").off('change.indicator').on('change.indicator', function() {
            //... do my event
        });

我不希望事件为场景＃1触发，但它适用于所有三个场景。

Answer 1

您可以在reduce()内使用filter()来确定是否检查了给定组中的任何无线电。如果事件被触发，此演示会抛出警报。如果没有设置事件附件，它会过滤掉事件附件的复选框。

＆＃13;

$('div[data-test]').each(function(i){
  var testDiv = this, test = $(this).data('test');

  $("input[name^='indicator']", testDiv).filter(function(){
    // filter the inputs. Returns all if any of them have a value.
    return Array.prototype.reduce.call($("input[name^='indicator']", testDiv), function(a,b){
      return a.checked || b.checked;
    });
  }).off('change.indicator').on('change.indicator', function() {
    // attach your event.
    alert("event fired for test " + test);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-test="1">
  <div>test 1 (neither checked):</div>
  <input type="radio" name="indicator1" value="1">
  <input type="radio" name="indicator1" value="2">
</div>
<div data-test="2">
  <div>test 2 (second checked):</div>
  <input type="radio" name="indicator2" value="1">
  <input type="radio" name="indicator2" value="2" checked=checked>
</div>
<div data-test="3">
  <div>test 3 (first checked):</div>
  <input type="radio" name="indicator3" value="1" checked=checked>
  <input type="radio" name="indicator3" value="2">
</div>

＆＃13;

Answer 2

所以你的HTML就是这样吗？

<input type="radio" class="options1" name="options1" value="1">
<input type="radio" class="options1" name="options1" value="2">
<input type="radio" class="options1" name="options1" value="3">
<input type="radio" class="options2" name="options2" value="1">
<input type="radio" class="options2" name="options2" value="2">
<input type="radio" class="options2" name="options2" value="3">

我建议你为NON NULL更改实现这种函数：

$('.options1').change(function(){
    if($(this).prop("checked", true){
        //... do your event
    }

});

$('.options2').change(function(){
    if($(this).prop("checked", true){
        //... do your event
    }

});

从非空组值检测RadioButton的onChange

2 个答案: