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

Question

当我选中一个复选框时，我希望它变成

#0099ff。

当我取消选中该复选框时，我希望它撤消该操作。

到目前为止我的代码：

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

Answer 1

检查这个代码：

<!-- 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>

Answer 2

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

Answer 3

也许您可以使用此代码在选中或取消选中复选框时执行操作。

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

Answer 4

我会做：

$('#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< /a>

Answer 5

优化实现

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

---

Demo

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

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>

Answer 6

为什么不使用内置事件？

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

Answer 7

试试这个。

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

有时我们过度使用jquery。使用 jquery 和纯 JavaScript 可以实现很多事情。

Answer 8

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

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

Answer 9

最好是用不同的颜色定义一个类，然后

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

用这种方式切换类，这样你的代码会更干净，因为你不必指定所有 css 属性（假设你想添加边框、文本样式或其他属性） ...）但你只是换了一个班级

Answer 10

我找到了一个疯狂的解决方案来处理复选框未选中或选中的问题
这是我的算法...
创建一个全局变量，假设 var check_holder

check_holder 有 3 个状态

1. 未定义状态
2. 0 状态
3. 1 状态< /strong>

如果单击复选框，

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

上面的代码可以在很多情况下使用来查明复选框是否已选中或未选中。其背后的概念是将复选框状态保存在变量中，即何时打开、关闭。
我希望这个逻辑可以用来解决你的问题。

Answer 11

我会 使用 .change() 和 this.checked< /code>:

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

--

关于使用 this.checked
Andy E 写了一篇关于我们如何过度使用 jQuery 的精彩文章：利用 jQuery 的强大功能来访问元素的属性。本文专门讨论了 .attr("id") 的使用，但在 #checkbox 是 元素的问题与 $(...).attr('checked') 相同（甚至 $(... ).is(':checked')) 与 this.checked。