如果checkbox被选中，则执行此操作

当我检查一个checkbox时，我希望它转向<p> #0099ff 。

当我取消选中checkbox时，我想让它撤消。

代码我到目前为止：

 $('#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 的强大function来访问元素的属性 。 本文特别对待.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。 使用纯javascript的jquery可以实现很多function。

Answer 3

可能发生“this.checked”总是“打开”。 所以我build议：

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

我发现了一个疯狂的解决scheme来处理这个问题的checkbox没有选中或检查在这里是我的algorithm…创build一个全局variables让我们说var check_holder

check_holder有3个状态

1. 未定义的状态
2. 0状态
3. 1状态

如果checkbox被点击，

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

上面的代码可以在很多情况下使用，以确定checkbox是否已被选中或未被选中。 其背后的概念是将checkbox的状态保存在一个variables，即当它打开，closures。 我希望这个逻辑可以用来解决你的问题。

Answer 6

检查这个代码：

 <!-- script to check whether checkbox checked or not using prop function --> <script> $('#change_password').click(function(){ if($(this).prop("checked") == true){ 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

也许你可以用这个代码来执行操作，因为checkbox被选中或取消选中。

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

Answer 9

最佳实施

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

---

演示

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

 <script src="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 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'); } });