iCheck 库的 ifChanged 事件仅针对第一个单选按钮的更改触发

Question

我正在尝试触发 iCheck 的 ifChanged 事件。但只有当我将我的选择更改为第一选择（阅读）以及我将我的选择从第一选择（阅读）更改为其他选择时，它才会触发。我的意思是，只要第一个选择是更改的主题，console.log 就会打印 'R' 到控制台。

每当第二个和第三个选择（未读、全部）之间发生变化时，根本不会触发该事件。

我希望每次更改选择并打印与新选择关联的值时都触发它。

我做错了什么？

<script>
   $( document ).ready(function() {
       $( 'input').iCheck({
           radioClass:'iradio_minimal-blue'
       });
       $( '#read_flag').on('ifChanged', function(event) {
           console.log( $(this).val() );
       });
   });
</script>

<div class="form-group">
    <label>
        <input type="radio" name="read_flag" id="read_flag" value="R">
        Read
    </label>
    <label>
        <input type="radio" name="read_flag" id="read_flag" value="U">
        Unread
    </label>
    <label>
        <input type="radio" name="read_flag" id="read_flag" value="A">
        All
    </label>
</div>

Answer 1

id 属性在 dom 中应该是唯一的。因此，当您使用 $('#read_flag') 时，它总是 return DOM 中的第一个匹配元素。要解决此问题，您可以将所有单选按钮的 id 更新为 class，例如：

<input type="radio" name="read_flag" class="read_flag" value="A">

然后像这样更新您的 js 代码：

$('.read_flag').on('ifChanged', function(event) {
     console.log( $(this).val() );
});

如果您由于某种原因无法更新 HTML 代码，您可以使用 input:radio 选择器，例如：

$('.form-group input:radio').on('ifChanged', function(event) {
     console.log( $(this).val() );
});

iCheck 库的 ifChanged 事件仅针对第一个单选按钮的更改触发

ifChanged event of iCheck library is triggered for only first radio button's changes

jquery

icheck