दिलचस्प पोस्ट
समान ऑब्जेक्ट में डुप्लिकेट प्रॉपर्टी नामों के साथ JSON को डिसेरीज़ कैसे करें FormsAuthentication.SignOut () उपयोगकर्ता को लॉग आउट नहीं करता है गैर-काली पृष्ठभूमि रंग के साथ जीपीजी में पारदर्शी पीएनजी कन्वर्ट करें SQL सर्वर में पिछले महीने के रिकॉर्ड प्राप्त करें नियंत्रण। अतिरिक्त रेंज (…) धीमा है फोन नंबरों के लिए jquery में एक नियमित अभिव्यक्ति का उदाहरण प्रीफ़ेचिंग के उदाहरण? एपीआई पर अंक लगाना सर्वश्रेष्ठ प्रथाओं क्या Windows कमांड लाइन पर 'कौन सा' है? क्यों एक्सएमएल सीरियलिज़ेबल वर्ग को पैरासेलेबल कन्स्ट्रक्टर की आवश्यकता है JQuery को क्रोम एक्सटेंशन में लोड करें? पोर्ट 80 पर मैं Node.js कैसे चला सकता हूं? एक फ्लेक्स आइटम भाई-बहनों के लिए ऊंची सीमा निर्धारित करता है ग्रिडलेआउट (GridView नहीं) सभी बच्चों को समान रूप से कैसे फैलाना तार्किक ऑपरेटर, || या या?

टॉगल चेकबॉक्सेस चालू / बंद करें

मेरे पास निम्न है:

$(document).ready(function() { $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").attr('checked', true); }); }); 

मुझे id="select-all-teammembers" जब चेक और अनचेक के बीच टॉगल करने के लिए क्लिक किया जाता है। विचार? यह कोड की लाइनों के दर्जनों नहीं हैं?

Solutions Collecting From Web of "टॉगल चेकबॉक्सेस चालू / बंद करें"

तुम लिख सकते हो:

 $(document).ready(function() { $("#select-all-teammembers").click(function() { var checkBoxes = $("input[name=recipients\\[\\]]"); checkBoxes.prop("checked", !checkBoxes.prop("checked")); }); }); 

JQuery 1.6 से पहले, जब हम केवल एट्रर () और प्रोप () नहीं थे , तो हम लिखते थे:

 checkBoxes.attr("checked", !checkBoxes.attr("checked")); 

लेकिन prop() की तुलना में बेहतर attr() जब attr() "बूलियन" एचटीएमएल गुणों पर लागू होता है, तो इसे आमतौर पर इस स्थिति में पसंद किया जाता है।

 //this toggles the checkbox, and fires its event if it has $('input[type=checkbox]').trigger('click'); //or $('input[type=checkbox]').click(); 

मुझे पता है कि यह पुराना है, लेकिन उस टॉगल में सवाल थोड़ा अस्पष्ट था, इसका मतलब यह हो सकता है कि प्रत्येक चेकबॉक्स को उसके राज्य को टॉगल करना चाहिए, चाहे जो भी हो। यदि आपके पास 3 की जाँच की और 2 अनियंत्रित है, तो टॉगल करना पहले 3 को अनचेक कर देगा और पिछले 2 की जाँच की जाएगी।

इसके लिए, यहां दिए गए समाधानों में से कोई भी काम नहीं करता जितना वे सभी चेकबॉक्स बनाते हैं, प्रत्येक चेकबॉक्स की स्थिति को टॉगल करने के बजाय। कई चेकबॉक्सेस पर $(':checkbox').prop('checked') कर रहा है तार्किक और सभी के बीच। चेक .checked बायनरी गुण, अर्थात अगर उनमें से एक अनचेक हो, तो लौटा हुआ मूल्य false

यदि आप वास्तव में प्रत्येक चेकबॉक्स स्थिति को टॉगल करना चाहते हैं, तो उन्हें सभी बराबर बनाने की आवश्यकता है, उदाहरण के लिए

  $(':checkbox').each(function () { this.checked = !this.checked; }); 

ध्यान दें कि आपको हेन्डलर के अंदर $(this) की ज़रूरत नहीं है। .checked प्रॉपर्टी सभी ब्राउज़र में मौजूद हैं

यहाँ एक और तरीका है जिसे आप चाहते हैं

 $(document).ready(function(){ $('#checkp').toggle( function () { $('.check').attr('Checked','Checked'); }, function () { $('.check').removeAttr('Checked'); } ); }); 

मुझे लगता है कि बस एक क्लिक ट्रिगर करने के लिए आसान है:

 $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").trigger('click'); }); 

इस प्लगइन का उपयोग करें:

 $.fn.toggleCheck =function() { if(this.tagName === 'INPUT') { $(this).prop('checked', !($(this).is(':checked'))); } } 

फिर

 $('#myCheckBox').toggleCheck(); 

JQuery 1.6 के बाद से आप प्रत्येक पाया तत्व की जाँच की स्थिति को टॉगल करने के लिए .prop(function) का उपयोग कर सकते हैं:

 $("input[name=recipients\\[\\]]").prop('checked', function(_, checked) { return !checked; }); 

मान लें कि यह एक छवि है जिसे चेकबॉक्स टॉगल करना होगा, यह मेरे लिए काम करता है

 <img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));"> <input type="checkbox" id="checkboxid"> 

चेक-सारे चेकबॉक्स को कुछ शर्तों के तहत ही अपडेट किया जाना चाहिए। '# Select-all-teammembers' पर क्लिक करने की कोशिश करें, फिर कुछ वस्तुओं को अनचेक करें और फिर से चयन करें-सभी पर क्लिक करें। आप असंगतता देख सकते हैं इसे रोकने के लिए निम्नलिखित चाल का उपयोग करें:

  var checkBoxes = $('input[name=recipients\\[\\]]'); $('#select-all-teammembers').click(function() { checkBoxes.prop("checked", !checkBoxes.prop("checked")); $(this).prop("checked", checkBoxes.is(':checked')); }); 

BTW सभी चेकबॉक्स DOM-object को ऊपर वर्णित के रूप में कैश किया जाना चाहिए।

सबसे अच्छा तरीका है जो मैं सोच सकता हूँ

 $('#selectAll').change(function () { var checked = (this.checked) ? true : false; $('.reportCheckbox').prop('checked', checked); }); 

या

 $checkBoxes = $(".checkBoxes"); $("#checkAll").change(function (e) { $checkBoxes.prop("checked", this.checked); }); 

सबसे बुनियादी उदाहरण होगा:

 // get DOM elements var checkbox = document.querySelector('input'), button = document.querySelector('button'); // bind "cilck" event on the button button.addEventListener('click', toggleCheckbox); // when clicking the button, toggle the checkbox function toggleCheckbox(){ checkbox.checked = !checkbox.checked; }; 
 <input type="checkbox"> <button>Toggle checkbox</button> 

बस आप इसका उपयोग कर सकते हैं

 $("#chkAll").on("click",function(){ $("input[name=checkBoxName]").prop("checked",$(this).prop("checked")); }); 

अगर आप प्रत्येक बॉक्स को व्यक्तिगत रूप से टॉगल करना चाहते हैं (या सिर्फ एक बॉक्स ही काम करता है):

मैं .each () का प्रयोग करने की सलाह देता हूं, क्योंकि आप अलग-अलग चीजें चाहते हैं, और फिर भी अपेक्षाकृत कम और पढ़ने में आसान है, इसे संशोधित करना आसान है।

उदाहरण:

 // toggle all checkboxes, not all at once but toggle each one for its own checked state: $('input[type="checkbox"]').each(function(){ this.checked = ! this.checked }); // check al even boxes, uncheck all odd boxes: $('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); }); // set all to checked = x and only trigger change if it actually changed: x = true; $('input[type="checkbox"]').each(function(){ if(this.checked != x){ this.checked = x; $(this).change();} }); 

एक साइड नोट पर … सुनिश्चित नहीं है कि हर व्यक्ति का उपयोग क्यों करता है .attr () या .prop () से (संयुक्त राष्ट्र) चीजों की जांच करें

जहाँ तक मुझे पता है, element.checked हमेशा सभी ब्राउज़रों में एक ही काम किया है?

 jQuery("#checker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = true; }); }); jQuery("#dechecker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = false; }); }); jQuery("#checktoggler").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = !this.checked; }); }); 

😉

मेरे अनुमान में, सबसे अच्छा आदमी जो सामान्य संस्करण का सुझाव दिया है गिगोलनेट गीगोलशाविली है, लेकिन मैं और भी बहुत ही सुंदर संस्करण का सुझाव देना चाहता हूं। इसे जाँचे

 $(document).on('click', '.fieldWrapper > label', function(event) { event.preventDefault() var n = $( event.target ).parent().find('input:checked').length var m = $( event.target ).parent().find('input').length x = n==m? false:true $( event.target ).parent().find('input').each(function (ind, el) { // $(el).attr('checked', 'checked'); this.checked = x }) }) 

सही या गलत के बजाय 'चेक' या नल की स्थापना क्रम में काम करेगा।

 // checkbox selection var $chk=$(':checkbox'); $chk.prop('checked',$chk.is(':checked') ? null:'checked'); 

आप इस तरह भी लिख सकते हैं

 $(function() { $("#checkbox-toggle").click(function() { $('input[type=checkbox][name=checkbox_id\\[\\]]').click(); }); }); 

उपयोगकर्ता को '# चेकबॉक्स-टॉगल' आईडी के साथ बटन पर क्लिक करने पर बस चेक बॉक्स पर क्लिक करने की आवश्यकता है।

बेहतर दृष्टिकोण और यूएक्स

 $('.checkall').on('click', function() { var $checks = $('checks'); var $ckall = $(this); $.each($checks, function(){ $(this).prop("checked", $ckall.prop('checked')); }); }); $('checks').on('click', function(e){ $('.checkall').prop('checked', false); }); 
 <table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive"> <thead> <tr> <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th> <th class="col-xs-2">#ID</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="order333"/></td> <td>{{ order.id }}</td> </tr> <tr> <td><input type="checkbox" name="order334"/></td> <td>{{ order.id }}</td> </tr> </tbody> </table> 

प्रयत्न:

 $(".table-datatable .select_all").on('click', function () { $("input[name^='order']").prop('checked', function (i, val) { return !val; }); }); 

यह मेरे लिए बहुत अच्छा काम करता है

  $("#checkall").click(function() { var fruits = $("input[name=fruits\\[\\]]"); fruits.prop("checked", $(this).prop("checked")); }); 

यह कोड वेब टेम्पलेट में उपयोग किए जाने वाले टॉगल स्विच एनीमेटर पर क्लिक करने पर चेक बॉक्स को टॉगल करेगा। ".onoffswitch-label" को अपने कोड में उपलब्ध के रूप में बदलें। "चेकबॉक्सआईडी" यहां चेक बॉक्स टॉगल किया गया है।

 $('.onoffswitch-label').click(function () { if ($('#checkboxID').prop('checked')) { $('#checkboxID').prop('checked', false); } else { $('#checkboxID').prop('checked', true); } }); 

Html5 और लेबल के साथ चेकबॉक्स का चयन किए बिना चेक बॉक्स को चालू करने के लिए यहां एक jQuery तरीका है:

  <div class="checkbox-list margin-auto"> <label class="">Compare to Last Year</label><br> <label class="normal" for="01"> <input id="01" type="checkbox" name="VIEW" value="01"> Retail units </label> <label class="normal" for="02"> <input id="02" type="checkbox" name="VIEW" value="02"> Retail Dollars </label> <label class="normal" for="03"> <input id="03" type="checkbox" name="VIEW" value="03"> GP Dollars </label> <label class="normal" for="04"> <input id="04" type="checkbox" name="VIEW" value="04"> GP Percent </label> </div> $("input[name='VIEW']:checkbox").change(function() { if($(this).is(':checked')) { $("input[name='VIEW']:checkbox").prop("checked", false); $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked"); $(this).prop("checked", true); $(this).parent('.normal').addClass('checked'); } else{ $("input[name='VIEW']").prop("checked", false); $("input[name='VIEW']").parent('.normal').removeClass('checked'); } }); 

http://www.bootply.com/A4h6kAPshx

वैसे एक आसान तरीका है

पहले अपने चेकबॉक्स को क्लास का उदाहरण दें 'id_chk'

तब चेकबॉक्स के अंदर जो 'id_chk' चेकबॉक्स स्थिति को नियंत्रित करेगा:

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

सब कुछ, उम्मीद है कि यह मदद करता है