jQuery:如果选中复选框,则为toggleClass

Question

我是一个jQuery noob,似乎我一直都会,试图让这个简单的事情发挥作用.

我想要的是,当选中复选框时,隐藏div display: none;.

这里有一个jFiddle什么我做的乱七八糟的例子.

感谢您的帮助或其他解决方案:)

Answer 1

我同意卡里姆·如果你只需要隐藏/显示,使用.toggle(bool),如果你的例子被简化了,你需要一个类,使用.toggleClass("class", bool),就像这样:

$(function(){
  $("#checkbox4").change(function() {
    $("#checkout-shipping-address").toggleClass("show-hide", this.checked)
  }).change();
});?

你可以在这里测试一下,最后一个.change()调用是在页面首次加载时使状态匹配,这就是我的意思.

Answer 2

没有必要show-hide上课.只需传递一个布尔值来切换,并通过使用设置div的初始状态triggerHandler,这允许您触发绑定到元素的事件处理程序,而不会实际影响元素的状态:

$(document).ready(function() {
    $("#checkbox4").click(function() {
        $("#checkout-shipping-address").toggle(this.checked);
    }).triggerHandler('click');
});

演示:http://jsfiddle.net/nQnDG/3/