Question

到目前为止，我做了一张桌子。每列都有一个复选框。我想做的是当我点击表格中的每个复选框中的复选框时被选中。有人知道怎么做吗？

这是我的代码：

<table style="width:100%">
            <tr>
                <th><input class="checkbox" type="checkbox"></th>
                <th>Spieler</th>
                <th>Rang</th> 
                <th>Tage</th>
              </tr>
              <tr>
                <td><input class="checkbox" type="checkbox"></td>
                <td>HELLFIRE944</td>
                <td>Komandant</td> 
                <td>212</td>
              </tr>
              <tr>
                <td><input class="checkbox" type="checkbox"></td>
                <td>Backfischjoghurt</td>
                <td>Ausführender Offizier</td> 
                <td>217</td>
              </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>retoaba</td>
                    <td>Personaloffizier</td> 
                    <td>210</td>
                </tr>
               <tr>
                   <td><input class="checkbox"  type="checkbox"></td>
                    <td>chrisi_39</td>
                    <td>Rekrutierungsoffizier</td> 
                    <td>210</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>salpo</td>
                    <td>Unteroffizier</td> 
                    <td>212</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>Kaeltischerkriger</td>
                    <td>Unteroffizier</td> 
                    <td>213</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>DnerYoo_sniper</td>
                    <td>Rekrut</td> 
                    <td>39</td>
               </tr>
              <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>panzerzockerundnoah</td>
                    <td>Rekrut</td> 
                    <td>146</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>PanzaSintKuhlMinecraftLP</td>
                    <td>Rekrut</td> 
                    <td>116</td>
               </tr>

的CSS：

th{
    color:white;
    text-align: left;
    width: 5px;
}
td {
    color:white;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    font-family: arial, sans-serif;
}
th, td {
    padding: 15px;
}
tr:nth-child(even) {
    background-color: #3A0505;
}

Answer 1

试试这个。

$(document).on("change", "th .checkbox", function () {
    if ($(this).is(":checked"))
    {
        $("td .checkbox").prop('checked', true);
    }
    else
    {
        $("td .checkbox").prop('checked', false);
    }
})

以下是工作示例https://jsfiddle.net/p5pnj0u9/

Answer 2

您可以在第一个复选框中为所有其他复选框执行document.getElementById("checkbox").checked = true;的onClick-Event。如果你使用jQuery 1.6+，你可以使用$("#checkbox").prop("checked", true);，以下所有版本都使用$("#checkbox").attr("checked", true);。

单击一个复选框，选中所有复选框

2 个答案: