blocks|key|1447024|text|另一种方法是扩展jquery，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447025|$.fn.toggleCheckbox+=+function()+{
++++this.attr('checked',+!this.attr('checked'));
}|code-block|syntax|javascript|1447026|然后调用：|1447027|$('.offer').find(':checkbox').toggleCheckbox();|1447028|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Another approach would be to extended jquery like this:

<pre><code>$.fn.toggleCheckbox = function() {
 this.attr('checked', !this.attr('checked'));
}
</code></pre>

Then call:

<pre><code>$('.offer').find(':checkbox').toggleCheckbox();
</code></pre>

blocks|key|1232033|text|您可以使用toggle函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1232034|$('.offer').toggle(function()+{
++++$(this).find(':checkbox').attr('checked',+true);
},+function()+{
++++$(this).find(':checkbox').attr('checked',+false);
});|code-block|syntax|javascript|1232035|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Events/toggle^0|5|6|5|6|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

You could use the <a href="http://docs.jquery.com/Events/toggle" rel="noreferrer"><code>toggle</code></a> function:

<pre><code>$('.offer').toggle(function() {
 $(this).find(':checkbox').attr('checked', true);
}, function() {
 $(this).find(':checkbox').attr('checked', false);
});
</code></pre>

blocks|key|1232120|text|为什么不排成一行呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1232121|$('.offer').click(function(){
++++$(this).find(':checkbox').attr('checked',+!$(this).find(':checkbox').attr('checked'));
});|code-block|syntax|javascript|1232122|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 in one line?

<pre><code>$('.offer').click(function(){
 $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});
</code></pre>

blocks|key|1447089|text|我有一个名为chkDueDate的复选框和一个带有单击事件的HTML对象，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1447090|$('#chkDueDate').attr('checked',+!$('#chkDueDate').is(':checked'));|code-block|syntax|javascript|1447091|单击HTML对象(在本例中为)可切换checkbox的checked属性。|1447092|entityMap^0|6|A|0|0|E|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I have a single checkbox named <code>chkDueDate</code> and an HTML object with a click event as follows:

<pre><code>$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));
</code></pre>

Clicking the HTML object (in this case a <code>&lt;span&gt;</code>) toggles the checked property of the checkbox.

blocks|key|1447349|text|jQuery:最好的方法是，将操作委托给jQuery+(jQuery+=+jQuery)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447350|$(+"input[type='checkbox']"+).prop(+"checked",+function(+i,+val+)+{
++++return+!val;
});|code-block|syntax|javascript|1447351|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|$]]

jQuery: Best Way, delegate the actions to jQuery (jQuery = jQuery).

<pre><code>$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
 return !val;
});
</code></pre>

blocks|key|1231997|text|尝试更改此设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231998|$(this).find(':checkbox').attr('checked',+true+);+|code-block|syntax|javascript|1231999|要这样做：|1232000|$(this).find(':checkbox').attr('checked',+'checked');+|1232001|不是100%25确定这是否可以做到，但我似乎记得有过类似的问题。祝好运!|1232002|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

try changing this:

<pre><code>$(this).find(':checkbox').attr('checked', true ); 
</code></pre>

to this:

<pre><code>$(this).find(':checkbox').attr('checked', 'checked'); 
</code></pre>

Not 100% sure if that will do it, but I seem to recall having a similar problem. Good luck!

blocks|key|1232019|text|$('.offer').click(function(){+
++++if+($(this).find(':checkbox').is(':checked'))
++++{
++++++++$(this).find(':checkbox').attr('checked',+false);+
++++}else{
++++++++$(this).find(':checkbox').attr('checked',+true);+
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1232020|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>$('.offer').click(function(){ 
 if ($(this).find(':checkbox').is(':checked'))
 {
 $(this).find(':checkbox').attr('checked', false); 
 }else{
 $(this).find(':checkbox').attr('checked', true); 
 }
});
</code></pre>

blocks|key|1232071|text|在JQuery中，我不认为click()接受两个用于切换的函数。为此，您应该使用toggle()函数：http://docs.jquery.com/Events/toggle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1232072|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Events/toggle^0|1F|10|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

In JQuery I don't think that click() accepts two functions for toggling. You should use the toggle() function for that: <a href="http://docs.jquery.com/Events/toggle" rel="nofollow noreferrer">http://docs.jquery.com/Events/toggle</a>

blocks|key|1232093|text|$('.offer').click(function()+{+
++++$(':checkbox',+this).each(function()+{
++++++++this.checked+=+!this.checked;
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1232094|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>$('.offer').click(function() { 
 $(':checkbox', this).each(function() {
 this.checked = !this.checked;
 });
});
</code></pre>

blocks|key|1232225|text|<label>
++++<input
++++++++type="checkbox"
++++++++onclick="$('input[type=checkbox]').attr('checked',+$(this).is(':checked'));"
++++/>
++++Check+all
</label>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1232226|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>&lt;label&gt;
 &lt;input
 type="checkbox"
 onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
 /&gt;
 Check all
&lt;/label&gt;
</code></pre>

blocks|key|1447116|text|最简单的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447117|$('.offer').click(function(){
++++var+cc+=+$(this).attr('checked')+==+undefined++?+false+:+true;
++++$(this).find(':checkbox').attr('checked',cc);
});|code-block|syntax|javascript|1447118|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|$]]

Easiest solution 

<pre><code>$('.offer').click(function(){
 var cc = $(this).attr('checked') == undefined ? false : true;
 $(this).find(':checkbox').attr('checked',cc);
});
</code></pre>

blocks|key|1447169|text|切换复选框值的另一种替代解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447170|<div+id="parent">
++++<img+src=""+class="avatar"+/>
++++<input+type="checkbox"+name=""+/>
</div>


$("img.avatar").click(function(){

++++var+op+=+!$(this).parent().find(':checkbox').attr('checked');
++++$(this).parent().find(':checkbox').attr('checked',+op);

});|code-block|syntax|javascript|1447171|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|$]]

Another alternative solution to toggle checkbox value:

<pre><code>&lt;div id="parent"&gt;
 &lt;img src="" class="avatar" /&gt;
 &lt;input type="checkbox" name="" /&gt;
&lt;/div&gt;


$("img.avatar").click(function(){

 var op = !$(this).parent().find(':checkbox').attr('checked');
 $(this).parent().find(':checkbox').attr('checked', op);

});
</code></pre>

blocks|key|1232326|text|++++$('controlCheckBox').click(function(){
++++var+temp+=+$(this).prop('checked');
++++$('controlledCheckBoxes').prop('checked',+temp);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1232327|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> $('controlCheckBox').click(function(){
 var temp = $(this).prop('checked');
 $('controlledCheckBoxes').prop('checked', temp);
});
</code></pre>

I've used a hover function where you do x on mouseover and y and mouseout. I'm trying the same for click but it doesn't seem to work:

<pre><code>$('.offer').click(function(){ 
 $(this).find(':checkbox').attr('checked', true ); 
},function(){
 $(this).find(':checkbox').attr('checked', false ); 
});
</code></pre>

I want the checkbox to be checked when clicking on a <code>div</code>, and unchecked if clicked again - a click toggle.

Click toggle with jQuery

jQuery

我使用了一个悬停函数，你可以在鼠标悬停时做x，然后做y和mouseout。我正在尝试同样的点击，但它似乎不起作用：$('.offer').click(function(){   $(this).find(':checkbox').attr('checked', true ); },function(){  $(this).find(':checkbox').attr('checked', fals

问单击使用jQuery切换
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击使用jQuery切换EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击使用jQuery切换
EN