如何選擇所有複選框，並通過jQuery單擊一個複選框時取消選擇？

-1

如何選擇所有複選框，並通過jQuery單擊一個複選框時取消選擇？如何選擇所有複選框，並通過jQuery單擊一個複選框時取消選擇？

html如下。
當我點擊名爲Select all的複選框，
下面的所有複選框將被選中，
然後再次單擊它，在它下面的所有複選框將被取消。

如何做到這一點，是否有演示？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'> 
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet"> 
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet"> 
</head> 
<body> 

<div class="container"> 
    <table class="table"> 
     <thead> 
     <tr> 
      <th> 
       <label class="c-input c-checkbox"> 
        <input type="checkbox"> 
        <span class="c-indicator"></span>Select all 
       </label> 
      </th> 
      <th>Name</th> 
      <th>Age</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td> 
       <label class="c-input c-checkbox"> 
       <input type="checkbox"> 
       <span class="c-indicator"></span> 
      </label> 
      </td> 
      <td>Jim</td> 
      <td>19</td> 
     </tr> 
     <tr> 
      <td> 
       <label class="c-input c-checkbox"> 
        <input type="checkbox"> 
        <span class="c-indicator"></span> 
       </label> 
      </td> 
      <td>Lucy</td> 
      <td>18</td> 
     </tr> 
     <tr> 
      <td> 
       <label class="c-input c-checkbox"> 
        <input type="checkbox"> 
        <span class="c-indicator"></span> 
       </label> 
      </td> 
      <td>Lily</td> 
      <td>18</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> 
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script> 
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 
</body> 
</html>

來源

2016-04-29 zwl1619

你需要嘗試你自己。 SO不是代碼寫入服務。如果出現問題，或者您需要幫助回來，並告訴我們您需要什麼地方，請嘗試一下。 – Utkanos

已經在這裏回答：http：//stackoverflow.com/questions/9669005/jquery-toggle-select-all-checkboxes – Birdman

給你的選擇全部複選框的ID：

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

給所有要選擇一類的複選框：

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

JQuery的：

$("#selectall").change(function() { 
    if($(this).is(":checked")) { 
     $(".checkboxSelection").each(function() { 
      $(this).prop('checked', true); 
     }); 
    } 
    else { 
     $(".checkboxSelection").each(function() { 
      $(this).prop('checked', false); 
     }); 
    }  
});

另外你可能會想要全選複選框t Ø不被選中，如果對方的一個沒有被選中，如果一切檢查檢查：

$(".checkboxSelection").change(function() { 
    var allSelected = true; 

    $(".checkboxSelection").each(function() { 
     if(!$(this).is(":checked")) { 
      $("#selectall").prop('checked', false); 
      allSelected = false; 
     } 
    }); 

    if(allSelected) 
     $("#selectall").prop('checked', true); 
});

來源

2016-04-29 16:21:40

謝謝！還有一件事，如果我手動選中它下面的所有複選框，我想要勾選「全選」複選框。 – zwl1619

@ zwl1619看到我編輯的版本 –

對不起，'所有的複選框'都是'所有複選框'。在編輯的版本中，選擇'全選'複選框將被選中 – zwl1619

我做了演示，但你需要看一下，瞭解，不只是用它，這是非常basci邏輯，嘗試使用語法，這將是容易的。

https://jsfiddle.net/vbrcfrn6/

$('#selectAll').on('change', function(){ 
    var state = $(this).prop('checked'); 
    $('.table input[type="checkbox"]').each(function(){ 
     $(this).prop('checked', state); 
    }); 
});

我把一個id =「全選」，在輸入選擇所有

*添加「表」中選擇做出限制的動作僅在此表中的複選框

來源

2016-04-29 16:23:28 evandrobm

這將使所有的複選框被檢查。 OP應該考慮到這一點。 –

是的，爲了限制，我們可以嵌入表類，在每個輸入中的類將接收此 – evandrobm

$('input[type="checkbox"]').first().on('change', function(){ 
    $('input[type="checkbox"]').each(function(){ 
    $(this).prop('checked', $('input[type="checkbox"]').first().is(':checked')); 
    }); 
});

只是一個快速的片段在這裏，看到小提琴：https://jsfiddle.net/k2oeh80w/

來源

2016-04-29 16:25:56 zoubida13

如何選擇所有複選框，並通過jQuery單擊一個複選框時取消選擇？

回答

相關問題