我的表格在表格外側(cè)有復(fù)選框和按鈕,可以從選擇切換到取消選擇,如何單擊表格行上的任意位置以及我的復(fù)選框勾選我將被一一選擇的位置以及何時(shí)到達(dá)最后一個(gè)表格行我的按鈕從選擇更改為取消選擇,我確實(shí)設(shè)法單擊表格行和復(fù)選框勾選,我失敗的是當(dāng)我到達(dá)最后一個(gè)表格行并且按鈕從選擇更改為取消選擇時(shí)。
我試圖獲取行的長(zhǎng)度
$('tr').click(function(event) { var $target = $(event.target); if (!$target.is('input:checkbox')) { var select_chk = document.getElementById("button1"); $(this).find('input:checkbox').each(function() { if ((this.checked)) { this.checked = false; button.value = "Unselect" } else { this.checked = true; button.value = "Select" } }) } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="check" value="Select" /> <table> <thead> <tr> <th></th> <th>Name</th> <th>Surname</th> <th>Gender</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>Cliff</td> <td>Deon</td> <td>Male</td> <td>52</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Dennis</td> <td>Van Zyl</td> <td>Male</td> <td>25</td> </tr> </tbody> </table>
有幾個(gè)問題。
這是一個(gè)工作版本,還可以處理單擊按鈕
我計(jì)算選中的復(fù)選框數(shù)量等于復(fù)選框總數(shù)。
我向 tbody 添加了 ID
我還使用三元
const $select_chk = $("#check"); const $table = $("#tbl") const $checks = $table.find('input:checkbox') const checkLength = $checks.length; $table.on("click","tr", function(e) { if (!e.target.matches("[type=checkbox]")) { // if not a checkbox $(this).find("input:checkbox").click() // click it anyway } $select_chk.val(checkLength === $table.find('input:checkbox:checked').length ? "Unselect" : "Select"); }); $select_chk.on("click", function() { // we need function to get "this" const chk = this.value === "Select"; // check if text is select $checks.each(function() { this.checked = chk; }); $select_chk.val(chk ? "Unselect" : "Select"); // toggle the text });
sssccc
Name | Surname | Gender | Age | |
---|---|---|---|---|
Cliff | Deon | Male | 52 | |
Dennis | Van Zyl | Male | 25 |