blocks|key|870171|text|如果你用不同的颜色定义一个类，然后切换这个类，效果会更好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|870172|$('#checkbox').click(function(){
++++var+chk+=+$(this);
++++$('p').toggleClass('selected',+chk.attr('checked'));
})+|code-block|syntax|javascript|870173|通过这种方式，您的代码更加整洁，因为您不必指定所有css属性(假设您想要添加边框、文本样式或其他...)但是你只是换了一个班级|870174|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

it's better if you define a class with a different colour, then you switch the class

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

in this way your code it's cleaner because you don't have to specify all css properties (let's say you want to add a border, a text style or other...) but you just switch a class

blocks|key|870304|text|尝尝这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|870305|$('#checkbox').click(function(){
++++if+(this.checked)+{
++++++++$('p').css('color',+'#0099ff')
++++}
})+|code-block|syntax|javascript|870306|有时我们会过度使用jquery。使用jquery和纯javascript可以实现许多功能。|870307|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try this. 

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

Sometimes we overkill jquery. Many things can be achieved using jquery with plain javascript.

blocks|key|1085077|text|$('#checkbox').change(function(){
+++(this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1085078|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|1085136|text|可能会发生"this.checked“总是"on”的情况。因此，我建议：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1085137|$('#checkbox').change(function()+{
++if+($(this).is(':checked'))+{
++++console.log('Checked');
++}+else+{
++++console.log('Unchecked');
++}
});|code-block|syntax|javascript|1085138|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It may happen that "this.checked" is always "on". Therefore, I recommend:

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

blocks|key|1085154|text|检查以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1085155|
<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>|code-block|syntax|javascript|1085156|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Check this code:
 
 

<pre><code>&lt;!-- script to check whether checkbox checked or not using prop function --&gt;
&lt;script&gt;
$('#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.");
 }
});
&lt;/script&gt;
</code></pre>

blocks|key|1085234|text|也许您可以使用此代码在复选框处于选中或取消选中状态时执行操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1085235|$('#chk').on('click',function(){
++++if(this.checked==true){
++++++alert('yes');
++++}else{
++++++alert('no');
++++}
});|code-block|syntax|javascript|1085236|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Probably you can go with this code to take actions as the checkbox is checked or unchecked.

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

blocks|key|870486|text|为什么不使用内置事件呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|870487|$('#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');
+++++}
});|code-block|syntax|javascript|870488|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why not use the built in events?

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

blocks|key|1085324|text|我会这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1085325|$('#checkbox').on("change",+function+(e){+

++++if(this.checked){

++++++//+Do+one+thing+

++++}

++++else{

+++++//+Do+some+other+thing

++++}

});|code-block|syntax|javascript|1085326|请参阅：https://www.w3schools.com/jsref/prop_checkbox_checked.asp|offset|length|1085327|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/jsref/prop_checkbox_checked.asp^0|0|0|4|1L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I would do : 

<pre><code>$('#checkbox').on("change", function (e){ 

 if(this.checked){

 // Do one thing 

 }

 else{

 // Do some other thing

 }

});
</code></pre>

See : <a href="https://www.w3schools.com/jsref/prop_checkbox_checked.asp" rel="nofollow noreferrer">https://www.w3schools.com/jsref/prop_checkbox_checked.asp</a>

When I check a checkbox, I want it to turn <code>&lt;p&gt;</code> <code>#0099ff</code>.

When I uncheck the checkbox, I want it to undo that.

Code I have so far:

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

if checkbox is checked, do this

当我选中一个复选框时，我想让它变成 #0099ff。当我取消选中复选框时，我想让它撤消该操作。到目前为止，我有以下代码：$('#checkbox').click(function(){ if ($('#checkbox').attr('checked')) { /* NOT SURE WHAT...

问如果复选框已选中，请执行以下操作
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果复选框已选中，请执行以下操作EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果复选框已选中，请执行以下操作
EN