使用jquery收听复选框状态

时间:2013-04-07 08:28:54

标签: jquery plugins checkbox radio-button listener

我创建了一个插件,在其中我用iPhone替换标准复选框,如幻灯片按钮。我可以用复选框绑定按钮,即当我点击YES按钮时,复选框被选中,当我点击NO按钮时,复选框被取消选中。同样,我也为单选按钮创建了一个插件。现在问题是,如果有人使用jquery检查复选框或使用jquery选择单选按钮,我如何监听此事件并更改我使用插件创建的相应按钮,因为我无法控制选择的代码单选按钮。

示例代码(我希望在点击按钮时调用更改事件,因为我不控制按钮的点击。基本上我想听这个事件):

<input type="radio" name="radio" id="radio1"> Radio 1 </BR>
<input type="radio" name="radio" id="radio2"> Radio 2 </BR>
<input type="radio" name="radio" id="radio3"> Radio 3 </BR>
<button>click me</button>

$('input:radio').change(function(){
    alert($(this).attr('id') + ' is changed');
});

$('button').click(function(){
    $('#radio1').prop('checked', 'true');
});

http://jsfiddle.net/s24101984/v3Zfn/

2 个答案:

答案 0 :(得分:1)

根据https://stackoverflow.com/a/4836831/280222设计,当复选框以编程方式更新时,JavaScript不会触发事件。

如果您可以控制更改属性的代码,那么您可以使用:

$('button').click(function(){
    $('#radio1').prop('checked', true).change();
});

在任何情况下:如果您正在编写插件,我建议您将其作为一个实现细节,使用底部的复选框。尝试为您的用户提供合适的API。这也可以解决这个问题。

答案 1 :(得分:0)

好的,我得到了答案,这里是回答这个问题的链接 LINK

我们可以使用Hooks,示例:

jQuery.attrHooks.checked = {
    set: function (el, value) {
        el.checked = value;
        $(el).trigger('change');
    }
};

类似地我们有propHooks,jsfiddle也在链接中共享

http://jsfiddle.net/2nKPY/