如果复选框被选中，执行此操作。

Question

当我选中一个复选框时，我希望它变成<p> #0099ff。

当我取消勾选此复选框时，我希望它恢复原状。

到目前为止，我拥有的代码：

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

- android.nick

---

“...当它未被选中时，禁用相同的功能。” - 传递给.click()的函数在单击事件上被调用。因此，我不明白您所说的“启用”和“禁用”的含义。如果复选框被选中，则可以调用函数a()。但是，您必须编写反向函数以在未选中复选框时调用。我感到困惑。 - jensgram

当然可以根据复选框的状态，使用.bind()和.unbind()将事件绑定到另一个元素。这是你想要的吗？ - jensgram

抱歉打扰了，但我已经制作了一个示例来说明我所说的。 - jensgram

我知道这是一个旧帖子，但现在jQuery使用prop()来代替这个问题想要使用的attr()方法；当时还没有创建prop()方法。然而，关于this.checked的答案可能仍然有用。 - trysis

Answer 1

我会使用.change()和this.checked：

我会使用.change()和this.checked：

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

--

关于使用 this.checked
Andy E写了一篇非常好的文章，讲述了我们过度使用jQuery的问题: 利用jQuery强大的功能来访问元素的属性。这篇文章专门讨论了使用.attr("id")的情况，但是如果#checkbox是一个<input type="checkbox" />元素，那么使用$(...).attr('checked')（甚至是$(...).is(':checked')）与this.checked存在相同的问题。

- jensgram

Answer 2

试试这个。

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

有时我们会过度使用 jQuery。许多事情可以通过纯 JavaScript 用 jQuery 实现。

- Chinmayee G

Answer 3

可能会出现“this.checked”始终为“on”的情况。因此，我建议：

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

- Benny Code

---

在我的情况下，我只是改成了 $(':checkbox') 以使其工作 ;) - Pathros

Answer 4

最好定义一个不同颜色的类，然后切换类。

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

以这种方式，您的代码更加清洁，因为您不必指定所有CSS属性（假设您想添加边框、文本样式或其他内容...）而只需切换类。

- fcalderan

---

泛用解决方案加1。然而，如果我们知道＃checkbox确实是一个复选框（否则，ID名称有些误导），没有理由执行 $（'#checkbox'）.attr（'checked'）。使用this.checked即可。 - jensgram

@jensgram @fcalderan +1 感谢你们的提示！我从未见过使用 switch 的 toggleClass。我将删除我的帖子，因为它是无用的。很抱歉我这么挑剔，但我认为如果不选择 '#checkbox' 两次，这个答案将会完美无缺：也许可以使用 $(this) 或 jensgram 的解决方案？ - attack

@attack 当然可以在使用前缓存元素（请参见现在的代码）。this.checked 比 $(..).attr('checked') 更快。 - fcalderan

Answer 5

我发现了一个疯狂的解决方案来处理复选框未选中或选中的问题，下面是我的算法...

创建一个全局变量，假设是var check_holder check_holder有三种状态

1. 未定义状态 2. 0状态 3. 1状态 如果单击复选框，

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

以上代码可用于许多情况下，以查找复选框是否已选中或未选中。其背后的概念是将复选框状态保存在变量中，即开启或关闭时。希望这个逻辑能够解决您的问题。

- zedecliff

---

解决方案确实很疯狂，但并不是好的方式。是的，全局变量可以帮助你解决今天的问题，但几乎肯定会成为明天的问题。尽可能避免使用它们，这在99％的情况下都是可行的。它们使得在不担心全局状态的情况下推理代码变得不可能。一个全局变量可能看起来无害，但很快就会变成十个、一百个。我曾经历过这种情况，看到了它的丑陋。 - bijancn

Answer 6

检查这段代码：

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>

- Prabhjit Singh

Answer 7

如果复选框被选中或取消选中，您可以使用此代码执行操作。

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

- Sanjiv Malviya

Answer 8

我会做：

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

请参阅：https://www.w3schools.com/jsref/prop_checkbox_checked.asp

- Jon Ryan

Answer 9

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

- Klaster_1 Нет войне

Answer 10

为什么不使用内置事件？

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});

- Paul 501