时间戳

首页 > 解决方案 > iCheck 库的 ifChanged 事件仅针对第一个单选按钮的更改触发

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

问题描述

我正在尝试触发 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>

标签： jqueryicheck

解决方案

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

推荐阅读