从非零组值检测onChange RadioButton

Question

我有一个onChange事件附加到单选按钮组，但我只希望它从非NULL状态（到另一个非NULL状态）切换时触发。

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

单选框方案：

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

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

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

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

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

我建议你去实现这种功能对于非NULL到非NULL变化：

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

}); 

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

});