jquery - 使用 jQuery 单击复选框时更改类和 ID

Question

我在 html 页面上有一个复选框，当它被选中时，我想更改一个 div 的 ID 和另一个 div 的类。

这是我为此编写的代码：

HTML：

<li><input type="checkbox" name="x" value="1" class="home6" /> Check this</li>

查询：

$(function(){
    if ($('.home6').is(':checked')) {
       $('.hider2').addClass('.hiderx').removeClass('.hider2');
       $('#next1').attr('id','next4');
    };
};

但是，这对我的 HTML 没有影响。

我已经尝试在控制台中进行调试，但它没有抛出任何错误。

我不认为该事件会被触发，因为我尝试在 if 语句中添加警报，但是，阅读了 :checked 选择器的文档，但这段代码看起来是正确的。

Answer 1

您应该将changeORclick事件绑定到您的复选框以执行您的脚本。

并且在你的代码点（。）中addClass不removeClass正确

Answer 2

尝试这个：

<li><input type="checkbox" name="x" value="1" class="home6" /> Check this</li>

以及相应的jQuery代码：

$(function(){
    $('.home6').on('change', function() { 
        if($(this).is(':checked')) 
        {
            $('.hider2').addClass('hiderx').removeClass('hider2');
            $('#next1').prop('id', 'next4');
        }
    });
});

Answer 3

它正在工作：http: //jsfiddle.net/balintbako/KK2Xr/

if ($('.home6').is(':checked')) {
    $('.hider2').addClass('hiderx').removeClass('hider2');
    $('#next1').attr('id','next4');
};

你是如何调用函数的？您需要使它成为一个动作处理程序或在 document.ready 上调用它，就像它在小提琴中一样。

Answer 4

尝试这个 ：-

$(function(){
  $($('.home6').change(function(){
    if ($(this).is(':checked')) {
       $('.hider2').addClass('hiderx').removeClass('hider2');
       $('#next1').attr('id','next4');
    };
  };
});