HTML में "सभी का चयन करें" चेक बॉक्स कैसे लागू करें?

Question

मेरे पास एक HTML पृष्ठ है जिसमें कई चेकबॉक्स हैं।

मुझे "सभी का चयन करें" नाम से एक और चेकबॉक्स की आवश्यकता है। जब मैं इस चेकबॉक्स का चयन करता हूं, तो HTML पृष्ठ के सभी चेकबॉक्स चयनित होने चाहिए। मैं यह कैसे कर सकता हूँ?

Comments

यदि आप कृपापूर्वक नीचा दिखाना चाहते हैं, तो "सभी का चयन करें" का चयन वास्तव में इसका मतलब यह होना चाहिए कि सभी अपने व्यक्तिगत राज्य की परवाह किए बिना चुने गए हैं। (जावास्क्रिप्ट अक्षम के साथ अपने पृष्ठ पर जाकर)

— कुछ

फ़ायरफ़ॉक्स में (और शायद अन्य?): CTRL+SHIFT+Kकंसोल खोलने के लिए हिट करें, फिर पेस्ट करें : $("input:checkbox").attr('checked', true)और हिट करें Enter। वर्तमान पृष्ठ के सभी चेक-बॉक्स अब जांचे जाने चाहिए। बदलने के लिए संयुक्त राष्ट्र की जाँचTrue करें False।

— १६:१le

Answer 1

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

अपडेट करें:

for each...inनिर्माण कार्य प्रतीत नहीं होता है, इस मामले में कम से कम, सफारी 5 या क्रोम 5 में इस कोड को सभी ब्राउज़रों में काम करना चाहिए:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Comments

प्रत्येक के लिए (चेक बॉक्स में var चेकबॉक्स) --------------------------------------- चाहिए: के लिए (var checkboxes in checkboxes)

— हैलोवर्ल्ड

@HelloWorld: प्रत्येक के लिए ... वास्तव में वैध जावास्क्रिप्ट है: developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… लेकिन, जैसा कि पोर्नले ने बताया है, यह एक अस्पष्ट निर्माण है। इसके अलावा, यह कोड सफारी 5 या क्रोम 5 में काम नहीं करता है। यह एफएफ 3.6 में काम करता है, और आईआईआरसी, यह सफारी 4 में for(var i in checkboxes) checkboxes[i].checked = source.checkedकाम करता है। सभी ब्राउज़रों में काम करता है।

— कैन गर्क गेदर

for inसंग्रह या सरणी के साथ कभी भी उपयोग न करें

— mplungjan

तुम , n=checkboxes.length;i<nसिर्फ करने के बजाय क्यों करते हो i < checkboxes.length? वैसे भी, फ़ंक्शन को सामान्य बनाने के लिए (कोड का पुन: उपयोग), एक अतिरिक्त पैरामीटर पास करें: (source, checkboxes_name)और क्या document.getElementsByName(checkboxes_name);यह हार्ड-कोडिंग नाम से बेहतर है और फ़ंक्शन को चेकबॉक्स के एक विशेष सेट के लिए विशिष्ट बनाता है।

— ADTC

ठीक है, जैसा कि मेरे संपादन को किसी कारण से अस्वीकार कर दिया गया था, मुझे लगता है कि मैं यहां टिप्पणी करूंगा। प्रत्येक निर्माण के लिए पदावनत किया जाता है और काम नहीं करेगा! आपको इसके प्रतिस्थापन का उपयोग करना होगा for(let checkbox of checkboxes):।

— फॉरेस्टहोपकिंस 19

Answer 2

JQuery का उपयोग करना :

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

HTML:

<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

Comments

मैं deselect के उपयोग के मामले को संभालने के लिए एक और क्लॉज़ जोड़ूंगा; ;-) .. और {// प्रत्येक चेकबॉक्स $ (": चेकबॉक्स") को अलग करें। प्रत्येक (फ़ंक्शन () {this.checked = false;})। }

— पन्नाध्वज

यदि आप इफ और बाहर छोड़ना चाहते हैं और फिर भी डिसेलेक्ट को हैंडल करते हैं तो आप इसे इस तरह से कर सकते हैं: var state = this.checked; $ (': चेकबॉक्स')। प्रत्येक (फ़ंक्शन () {this.checked = state;});

— आक्टेल

Answer 3

मुझे यकीन नहीं है कि किसी ने भी इस तरह से जवाब नहीं दिया ( jQuery का उपयोग करके ):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

यह साफ है, इसमें कोई लूप नहीं है या यदि / अन्यथा क्लॉस और आकर्षण के रूप में काम करता है।

Comments

बस तीन लाइनें, सरल => समझने में आसान और साथ ही साथ अचयनित करने के लिए काम करता है। धन्यवाद।

— तीजय

Answer 4

इसे अचयनित करने के लिए:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});

Comments

अगर और किसी की जरूरत नहीं है ... बस this.checkedइसके बजाय का उपयोग करें

— m13r

Answer 5

मुझे आश्चर्य है कि किसी ने उल्लेख नहीं किया document.querySelectorAll()। शुद्ध जावास्क्रिप्ट समाधान, IE9 + में काम करता है।

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}

<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

Comments

इसने क्रोम में काम किया, लेकिन मेरे पास अलग-अलग कारणों से बहुत सारे चेकबॉक्स थे, इसलिए 'टाइप = "चेकबॉक्स" को लक्षित करने के बजाय, मैंने' नाम = "myobject" को लक्षित किया और इसने काम भी किया।

— रिच 701

हो सकता है कि इसे नए सही उत्तर में बदल दिया जाए, यदि कुछ चर्चा सहायक नहीं होगी। :-)

— जेसी स्टील

यह उत्तर अन्य उत्तरों की तुलना में मौजूदा पृष्ठों में लागू करने के लिए बहुत आसान था। बहुत बढ़िया।

— टीएस

Answer 6

डेमो http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>

Comments

मेरे लिए यह केवल एक चक्र के लिए काम कर रहा है। यह केवल एक बार टॉगल करता है फिर यह कुछ भी नहीं करता है।

— 7

तो यह attr()विधि है जो मुझे लगता है। इसे बदल दियाprop()

— mrult

ठीक है, अगर मैं सूची से किसी आइटम का चयन रद्द कर दूं तो सभी चेकबॉक्स का चयन भी रद्द कर दिया जाना चाहिए?

— some_other_guy

Answer 7

थोड़ा बदला हुआ संस्करण जो जाँचता है और सम्मानपूर्वक अनचेक करता है

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

Answer 8

जब आप फोन document.getElementsByName("name")करेंगे तो आपको ए Object। .item(index)सभी वस्तुओं को पार करने के लिए उपयोग करेंObject

HTML:

<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​includes/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​misc/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​modules/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​profiles/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​scripts/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​sites/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​stats/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​themes/​">​

Answer 9

<html>

<head>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />

<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>

</html>

Answer 10

मेरा सरल समाधान प्रत्येक चेकबॉक्स के लिए अलग-अलग नामों का उपयोग करते हुए, फॉर्म के दिए गए हिस्से में सभी चेकबॉक्सों का चयन / चयन रद्द करने की अनुमति देता है , ताकि फॉर्म के POSTed होने के बाद उन्हें आसानी से पहचाना जा सके।

जावास्क्रिप्ट:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

HTML उदाहरण:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
    <p><input type="checkbox" name="colin" />Firth, Colin</p>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>

मुझे आशा है कि आप इसे पसंद करते हो!

Answer 11

इस सरल JQuery का प्रयास करें:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});

Comments

आप इसे सरल कर सकते हैं $(':checkbox').prop('checked', this.checked), सशर्त की कोई आवश्यकता नहीं है।

— सुमित

Answer 12

जावास्क्रिप्ट तुम्हारा सबसे अच्छा शर्त है। नीचे दिए गए लिंक सभी को डी / सेलेक्ट करने के लिए बटन का उपयोग करके एक उदाहरण देता है। आप एक चेक बॉक्स का उपयोग करने के लिए इसे अनुकूलित करने का प्रयास कर सकते हैं, बस आप 'का चयन करें सभी' चेक बॉक्स 'ऑन' क्लिक करें।

सभी चेकबॉक्स को चेक या अनचेक करने के लिए जावास्क्रिप्ट फंक्शन

इस पृष्ठ का एक सरल उदाहरण है

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

Answer 13

यह नमूना देशी जावास्क्रिप्ट के साथ काम करता है जहां चेकबॉक्स चर नाम बदलता है, अर्थात सभी "फू" नहीं।

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
    {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
  checkboxes = getcheckboxes();
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>


<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

</body>
</html>

Comments

अपने getcheckboxesकार्य के साथ प्रतिस्थापित किया जा सकताdocument.querySelectorAll('input[type=checkbox]');

— Kaiido

Answer 14

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type="text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>

Answer 15

वह काम करना चाहिए:

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

Answer 16

$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });

Answer 17

JQuery और नॉकआउट का उपयोग करना:

इस बंधन के साथ मुख्य चेकबॉक्स अंडरक्लाइंग चेकबॉक्स के साथ सिंक में रहता है, यह अनियंत्रित होगा जब तक कि सभी चेकबॉक्स चेक न कर दें।

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

HTML में:

<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

Comments

मुझे नॉकआउट के बारे में पर्याप्त जानकारी नहीं है (मैं ko3.4 का उपयोग cdnjs.cloudflare.com से कर रहा हूं। लेकिन ऊपर से काम नहीं लगता है - मैं शुरुआती इनिट पर एक ब्रेकपॉइंट सेट कर सकता हूं: कॉल जो पेज लोड होने पर ट्रिगर हो जाता है। (जो मुझे लगता है कि सही है), लेकिन इस पैदावार में कदम रखने से कुछ भी नहीं होता है - बाकी फ़ंक्शन में से कोई भी निष्पादित नहीं होता है। अन्य कार्यों पर ब्रेकपॉइंट सेट करना, और वे कभी भी ट्रिगर नहीं होते हैं।

— टोनी सफ़ोकल 66

टोनी सफ़ोक, वहाँ कला दो घटना संचालकों सेट: चेकबॉक्स के लिए onclick और onchange, और चेकबॉक्स मान कोड के अंत में अद्यतन किया गया है। यदि यह कोड आपके प्रोजेक्ट में काम नहीं करता है, तो चेकबॉक्स के लिए डेटा-बाइंड विशेषता की जांच करें।

— ब्लेज़कोविकज़

Answer 18

आपके पास एक ही फ़ॉर्म पर अलग-अलग चेकबॉक्स हो सकते हैं । यहां एक समाधान है जो वैनिला जावास्क्रिप्ट फ़ंक्शन का उपयोग करके वर्ग के नाम से चेकबॉक्स का चयन / अचयनित करता है डॉक्यूमेंट

सभी बटन का चयन करें

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

चेकबॉक्स में से कुछ का चयन करने के लिए

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

जावास्क्रिप्ट

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }

Comments

यह वास्तव में कारगर है। कृपया पहले, codepen.io/kustomweb/pen/gZqwLV

— निकोलस Giszpenc

Answer 19

उदाहरण के लिए, यदि आपके पास 5 चेकबॉक्स हैं, और आप सभी को चेक करते हैं, तो यह सब चेक करें, अब यदि आप प्रत्येक 5 चेकबॉक्स पर क्लिक करके अनचेक करते हैं, तो अंतिम चेकबॉक्स को अनचेक करने के लिए, चयन करें सभी चेकबॉक्स भी अनियंत्रित हो जाते हैं

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })

Answer 20

जैसा कि मैं टिप्पणी नहीं कर सकता, यहाँ उत्तर के रूप में: मैं कैन बर्क गुडर के समाधान को अधिक सामान्य तरीके से लिखूंगा, इसलिए आप अन्य चेकबॉक्स के लिए फ़ंक्शन का पुन: उपयोग कर सकते हैं

<script language="JavaScript">
  function toggleCheckboxes(source, cbName) {
    checkboxes = document.getElementsByName(cbName);
    for (var i = 0, n = checkboxes.length; i < n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

Comments

लापता ब्रैकेट को इंगित करने के लिए धन्यवाद khaldi और स्पष्टता!

— user219901

Answer 21

यदि jquery के लिए शीर्ष उत्तर को अपनाया जाता है, तो याद रखें कि क्लिक फ़ंक्शन को दी गई वस्तु एक EventHandler है, न कि मूल बॉक्सबॉक्स ऑब्जेक्ट। इसलिए कोड shoudl निम्नानुसार संशोधित किया जाना चाहिए।

एचटीएमएल

<input type="checkbox" name="selectThemAll"/> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

जावास्क्रिप्ट

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})

Comments

न केवल पहले इनपुट प्रकार गलत है, लेकिन यह सही करने के बाद भी यह नहीं काम मेरे लिए किया था

— त्रुटि संदेश

Answer 22

यहाँ एक backbone.js कार्यान्वयन है:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},

Answer 23

एचटीएमएल

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

जावास्क्रिप्ट

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});

Answer 24

1: onchange घटना हैंडलर जोड़ें

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: चेक / अनचेक करने के लिए कोड को संशोधित करें

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

Comments

कृपया पेस्ट कोड की प्रतिलिपि न करें, इसके बजाय एक लिंक stackoverflow.com/questions/19282219/…

— java_dude

Answer 25

नीचे दिए गए तरीके बहुत आसान हैं और आप मौजूदा फॉर्म को मिनटों में लागू कर सकते हैं

जेकरी के साथ,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

HTML फॉर्म में नीचे बटन दबाएं

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

जावास्क्रिप्ट का उपयोग करने के साथ,

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

HTML फॉर्म में नीचे बटन दबाएं

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

Answer 26

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

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});

Answer 27

jQuery का उपयोग करके इसे शॉर्ट-हैंड वर्जन में बनाना है

सभी चेकबॉक्स का चयन करें

<input type="checkbox" id="chkSelectAll">

बच्चे चेकबॉक्स

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

jQuery

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})

Answer 28

हो सकता है कि थोड़ी देर हो गई है, लेकिन जब सभी चेकबॉक्स के साथ एक चेक व्यवहार करते हैं, तो मेरा मानना ​​है कि आपको चेक-इन चेकबॉक्स की जाँच के लिए परिदृश्य को संभालना चाहिए और फिर नीचे दिए गए चेकबॉक्स में से किसी एक को अनचेक करना चाहिए।

उस स्थिति में यह स्वचालित रूप से चेक को सभी चेकबॉक्स को अनचेक कर देना चाहिए।

साथ ही जब सभी चेकबॉक्स को मैन्युअल रूप से चेक किया जाता है, तो आपको सभी चेकबॉक्स को स्वचालित रूप से चेक किए जाने के साथ समाप्त करना चाहिए।

आपको दो ईवेंट हैंडलर चाहिए, एक चेक ऑल बॉक्स के लिए, और एक नीचे दिए गए किसी भी बॉक्स पर क्लिक करने के लिए।

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}

Answer 29

सरल और सटीक:

jQuery - एक बटन या div या एक लेबल तत्व पर क्लिक करने पर। पृष्ठ पर सभी चेकबॉक्स बंद करें। ध्यान रखें कि आपको इसे समायोजित करना होगा: इसे और अधिक विशिष्ट बनाने के लिए चेकबॉक्स।

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});