Question

当我勾选复选框时，我希望它转为<p> #0099ff。

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

我到目前为止的代码：

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

Answer 1

我会use .change()和this.checked：

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

-

使用this.checked
Andy E对我们如何过度使用jQuery做了很好的记录：Utilizing the awesome power of jQuery to access properties of an element。本文专门讨论.attr("id")的使用，但如果#checkbox <{1}}元素，<input type="checkbox" />的问题相同（或$(...).attr('checked')甚至$(...).is(':checked')）与this.checked。

Answer 2

试试这个。

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

有时我们过度使用jquery。使用jquery和普通的javascript可以实现很多东西。

Answer 3

可能会发生“this.checked”始终“开启”。因此，我建议：

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

Answer 4

如果你定义一个具有不同颜色的类，然后你切换类

会更好

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

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

Answer 5

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

check_holder 有3个州

未定义状态
0州
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
     }
});

上述代码可用于许多情况，以确定是否已选中复选框或未选中复选框。它背后的概念是将复选框状态保存在变量中，即当它打开，关闭时。我希望逻辑可以用来解决你的问题。

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>

Answer 7

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

Answer 8

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

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

Answer 9

我愿意：

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

Answer 10

最佳实施

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

演示

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

为什么不使用内置事件？

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

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

11 个答案:

最佳实施

演示