Bagaimana cara menerapkan kotak centang "pilih semua" dalam HTML?

218

Saya memiliki halaman HTML dengan beberapa kotak centang.

Saya perlu satu lagi kotak centang dengan nama "pilih semua". Ketika saya memilih kotak centang ini, semua kotak centang di halaman HTML harus dipilih. Bagaimana saya bisa melakukan ini?

pengguna48094
sumber
1
Jika Anda ingin menurunkan secara anggun, memilih "pilih semua" harus benar-benar berarti bahwa semua dipilih terlepas dari status masing-masing. (mengunjungi halaman Anda dengan javascript dinonaktifkan)
beberapa
Di Firefox (dan mungkin yang lain?): Tekan CTRL+SHIFT+Kuntuk membuka konsol, lalu tempel : $("input:checkbox").attr('checked', true)dan tekan Enter. Semua kotak centang pada halaman saat ini sekarang harus diperiksa. Untuk menghapus centang ubah Trueke False.
ashleedawg

Jawaban:

308
<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/>

MEMPERBARUI:

The for each...inmembangun tampaknya tidak bekerja, setidaknya dalam hal ini, di Safari 5 atau Chrome 5. Kode ini harus bekerja di semua browser:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
Bisa Berk Güder
sumber
1
untuk setiap (kotak centang var dalam kotak centang) --------------------------------------- harus: untuk (var checkbox in checkboxes)
HelloWorld
@ HaloWorld: untuk masing-masing ... in sebenarnya Javascript yang valid: developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… Tapi, seperti yang ditunjukkan porneL, ini adalah konstruksi yang tidak jelas. Selain itu, kode ini tidak berfungsi di Safari 5 atau Chrome 5. Ia berfungsi di FF 3.6, dan IIRC, ini berfungsi di Safari 4. for(var i in checkboxes) checkboxes[i].checked = source.checkedberfungsi di semua browser.
Can Berk Güder
3
Jangan pernah gunakan for indengan koleksi atau array
mplungjan
1
Mengapa Anda melakukannya, , n=checkboxes.length;i<nbukan hanya i < checkboxes.length? Pokoknya, untuk membuat fungsi generik (penggunaan kembali kode), berikan parameter tambahan: (source, checkboxes_name)dan lakukan document.getElementsByName(checkboxes_name);Ini lebih baik daripada meng-coding-kan nama dan membuat fungsi spesifik untuk satu set kotak centang tertentu.
ADTC
3
Baiklah, karena edit saya ditolak karena alasan tertentu, saya kira saya akan berkomentar di sini. Konstruksi untuk-masing-masing sudah usang dan tidak akan berfungsi! Anda harus menggunakan penggantinya: for(let checkbox of checkboxes).
forresthopkinsa
126

Menggunakan 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" />
davydepauw
sumber
24
saya akan menambahkan klausa lain untuk menangani kasus penggunaan yang tidak dipilih, ;-) .. else {// Iterate setiap kotak centang $ (": checkbox"). masing-masing (function () {this.checked = false;}); }
emeraldjava
4
Jika Anda ingin mengabaikan if dan else dan masih menangani batal pilih, Anda dapat melakukannya dengan cara ini: var state = this.checked; $ (': checkbox'). masing-masing (function () {this.checked = state;});
Assil
85

Saya tidak yakin ada yang belum menjawab dengan cara ini (menggunakan jQuery ):

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

Ini bersih, tidak memiliki loop atau jika klausa lain dan berfungsi sebagai pesona.

fiatjaf
sumber
4
Hanya tiga baris, sederhana => mudah dimengerti dan berfungsi untuk membatalkan pilihan juga. Terima kasih.
TeeJay
61

Untuk membatalkan pilihan:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});
Var
sumber
2
jika tidak diperlukan ... gunakan this.checkedsaja
m13r
46

Saya terkejut tidak ada yang disebutkan document.querySelectorAll(). Solusi JavaScript murni, bekerja di 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 />

Sumit
sumber
1
ini bekerja di Chrome, tetapi saya punya banyak kotak centang karena alasan yang berbeda, jadi alih-alih menargetkan 'type = "checkbox"', saya menargetkan 'name = "myobject"' dan juga berfungsi.
Rich701
Mungkin ini harus diubah menjadi jawaban yang benar baru, jika tidak beberapa diskusi akan membantu. :-)
Jesse Steele
Jawaban ini jauh lebih mudah untuk diterapkan ke halaman yang ada daripada jawaban lainnya. kerja bagus.
TS
16

Demo 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>
merakli
sumber
1
Bagi saya itu hanya bekerja untuk satu siklus. Ini berganti hanya sekali maka tidak melakukan apa-apa.
mrudult
Jadi itu attr()metode yang saya kira. mengubahnya keprop()
mrudult
Nah, jika saya batal memilih item dari daftar, seharusnya kotak centang Select All tidak terpilih juga?
some_other_guy
10

Versi sedikit berubah yang memeriksa dan menghapus centang dengan hormat

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

Saat Anda menelepon document.getElementsByName("name"), Anda akan mendapatkan Object. Gunakan .item(index)untuk melintasi semua item aObject

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/​">
Chen Yang
sumber
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>
KarenAnne
sumber
9

Solusi sederhana saya memungkinkan untuk secara selektif memilih / membatalkan pilihan semua kotak centang di bagian tertentu dari formulir , sambil menggunakan nama yang berbeda untuk setiap kotak centang, sehingga mereka dapat dengan mudah dikenali setelah formulir diposkan.

Javascript:

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;
    }
}

Contoh 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>

Saya harap Anda menyukainya!

Giorgio Barchiesi
sumber
9

Coba JQuery sederhana ini:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});
Divyank Sabhaya
sumber
1
Anda dapat menyederhanakan itu untuk $(':checkbox').prop('checked', this.checked), tidak perlu untuk bersyarat.
Sumit
7

JavaScript adalah taruhan terbaik Anda. Tautan di bawah ini memberikan contoh menggunakan tombol untuk membatalkan / memilih semua. Anda dapat mencoba untuk mengadaptasinya menggunakan kotak centang, cukup gunakan Anda 'pilih semua' kotak centang 'pada atribut Klik.

Fungsi Javascript untuk Memeriksa atau Hapus centang semua Kotak Centang

Halaman ini memiliki contoh yang lebih sederhana

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

Cogsy
sumber
7

Sampel ini berfungsi dengan JavaScript asli di mana nama variabel kotak centang bervariasi, yaitu tidak semua "foo".

<!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>
Joseph Saad
sumber
2
getcheckboxesfungsi Anda dapat diganti dengandocument.querySelectorAll('input[type=checkbox]');
Kaiido
4
<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>
Charles
sumber
3

yang seharusnya melakukan pekerjaan:

    $(':checkbox').each(function() {
        this.checked = true;                        
    });
Rachid O
sumber
2
$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });
xrcwrn
sumber
2

Menggunakan jQuery dan sistem gugur:

Dengan kotak centang utama yang mengikat ini tetap selaras dengan kotak centang yang mendasari, kotak centang ini tidak akan dicentang kecuali semua kotak centang dicentang.

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

dalam 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"/>
blazkovicz
sumber
Saya tidak cukup tahu tentang sistem gugur (saya menggunakan ko3.4 dari cdnjs.cloudflare.com tetapi di atas sepertinya tidak berfungsi - sama sekali. Saya dapat mengatur breakpoint pada init awal: panggilan yang dipicu ketika halaman dimuat (yang saya anggap benar), tetapi melangkah ke hasil ini tidak ada - tidak ada fungsi yang dieksekusi. Pengaturan breakpoint pada fungsi-fungsi lain, dan mereka tidak pernah dipicu.
Tony Suffolk 66
Tony Suffolk, ada dua pengendali acara yang diatur: onclick dan onchange untuk kotak centang, dan nilai kotak centang diperbarui di akhir kode. Jika kode ini tidak berfungsi di proyek Anda, periksa atribut data-bind untuk kotak centang.
blazkovicz
2

Anda mungkin memiliki beberapa set kotak centang pada formulir yang sama . Berikut adalah solusi yang memilih / membatalkan pilihan kotak centang berdasarkan nama kelas, menggunakan dokumen fungsi vanilla javascript.getElementsByClassName

Tombol Pilih Semua

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

Beberapa kotak centang untuk dipilih

<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' />

Javascript

    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;
        }
    }
Nicolas Giszpenc
sumber
1
Itu berhasil. Silakan periksa codepen.io/kustomweb/pen/gZqwLV
Nicolas Giszpenc
2

Inilah yang akan dilakukan, misalnya jika Anda memiliki 5 kotak centang, dan Anda mengklik centang semua, centang semua, sekarang jika Anda hapus centang semua kotak centang mungkin dengan mengklik masing-masing 5 kotak centang, pada saat Anda menghapus centang pada kotak centang terakhir, pilih semua kotak centang juga tidak dicentang

$("#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)
      }
  })
samezedi
sumber
2

Karena saya tidak dapat berkomentar, di sini sebagai jawaban: Saya akan menulis solusi Can Berk Güder dengan cara yang lebih umum, sehingga Anda dapat menggunakan kembali fungsi untuk kotak centang lainnya

<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/>
pengguna219901
sumber
Terima kasih khaldi dan Clarity karena menunjukkan braket yang hilang!
user219901
2

Jika mengadopsi jawaban teratas untuk jquery, ingatlah bahwa objek yang diteruskan ke fungsi klik adalah EventHandler, bukan objek kotak centang asli. Oleh karena itu kode harus dimodifikasi sebagai berikut.

Html

<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/>

Javascript

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})
khylo
sumber
tidak hanya jenis input pertama yang salah, tetapi bahkan setelah memperbaikinya ini tidak berfungsi untuk saya
Pesan Kesalahan
1

Berikut ini adalah implementasi 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;
    }

},
nol dan satu
sumber
1

html

<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

javascript

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

1: Tambahkan Handler acara onchange

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

2: Memodifikasi kode untuk menangani dicentang / tidak dicentang

 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;
             }
         }
     }
 }
Sudhir Vishwakarma
sumber
Tolong jangan menyalin kode tempel, melainkan merujuk dengan tautan stackoverflow.com/questions/19282219/…
java_dude
1

Metode di bawah ini sangat Mudah dimengerti dan Anda bisa mengimplementasikan formulir yang ada dalam hitungan menit

Dengan Jquery,

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

dalam bentuk HTML taruh di bawah tombol

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

Dengan hanya menggunakan javascript,

<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>

dalam bentuk HTML taruh di bawah tombol

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

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

Anda dapat menggunakan kode sederhana ini

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

untuk membuatnya dalam versi tangan pendek dengan menggunakan jQuery

Kotak centang pilih semua

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

Kotak centang anak-anak

<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);  
})
Somwang Souksavatd
sumber
0

Mungkin agak terlambat, tetapi ketika berhadapan dengan kotak centang centang semua, saya yakin Anda juga harus menangani skenario ketika Anda mencentang semua kotak centang, dan kemudian hapus centang pada salah satu kotak centang di bawah ini.

Dalam hal ini harus secara otomatis menghapus centang pada kotak centang centang semua.

Juga ketika secara manual memeriksa semua kotak centang, Anda akan berakhir dengan mencentang semua kotak centang secara otomatis dicentang.

Anda memerlukan dua penangan acara, satu untuk kotak centang semua, dan satu untuk ketika mengklik salah satu kotak di bawah ini.

// 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"));
}
Albert
sumber
-2

Sederhana dan ke POINT:

jQuery - Setelah Mengklik tombol atau div atau elemen label. Centang semua kotak centang pada halaman. Ingatlah bahwa Anda harus menyesuaikan: centang untuk membuatnya lebih spesifik.

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

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

});
Patoshi パ ト シ
sumber