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

Question

当我选中一个复选框时,我希望它转向<p> #0099ff.

当我取消选中该复选框时,我希望它撤消该复选框.

我到目前为止的代码:

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

Answer 1

我会用 .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.

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属性(假设你想要添加边框,文本样式或其他...)但你只需要切换一个类