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') 时，它将始终返回 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() );
});