jquery - jQuery复选框和

Question

我有一个已经填充了结果的表。我还有一个我想用来操作表格内容的复选框。

复选框：

分支

---

• 一个
• 乙
• C

我的桌子看起来像这样

• 姓名|年龄|分公司
• 亚当，12，一个
• 地理，20，乙

我希望能够根据检查的内容在表中删除和添加一行。到目前为止，我是 jQuery 的新手：有什么帮助吗？

function sortByBranch() {
j$('#sfiltersb li label input[type="checkbox"]').bind("change", function(){
        if(j$(this).hasAttr("checked"){
            //do something
        }
      });

}

HTML

 <ul id="haystack" class="slist">
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-aa" value="AA" checked="checked" class="scritb" />Branch AA</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-ab" value="AB" checked="checked" class="scritb" />Branch AB</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-ac" value="AC" checked="checked" class="scritb" />Branch AC</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-ba" value="BA" checked="checked" class="scritb" />Branch BA</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-bb" value="BB" checked="checked" class="scritb" />Branch BB</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-bc" value="BC" checked="checked" class="scritb" />Branch BC</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-ca" value="CA" checked="checked" class="scritb" />Branch CA</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-cb" value="CB" checked="checked" class="scritb" />Branch CB</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-cc" value="CC" checked="checked" class="scritb" />Branch CC</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-da" value="DA" checked="checked" class="scritb" />Branch DA</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-db" value="DB" checked="checked" class="scritb" />Branch DB</label></li>
                      <li><label class="checkbox" style="cursor:pointer;"><input type="checkbox" name="branch-dc" value="DC" checked="checked" class="scritb" />Branch DC</label></li>
                  </ul>
                <button type="submit" class="btn" id="branch-search-btn" style="width:100%; font-size:13px; min-height:30px;">Search</button>

Answer 1

HTML

<input type="checkbox" value="A" />
<input type="checkbox" value="B" />
<input type="checkbox" value="C" />
<table>
<thead><tr><th>Name</th><th>Age</th><th>Branch</th></tr></thead>
<tbody>
    <tr><td>Adam</td><td>12</td><td>A</td></tr>
    <tr><td>Geo</td><td>20</td><td>B</td></tr>
    <tr><td>Peter</td><td>42</td><td>C</td></tr>
</tbody>
</table>

JavaScript

    $(function() {
        $('input:checkbox').change(function() {
        if ($(this).is(':checked') === true) {
            var myAlpha = $(this).val();
            $('table tbody tr:last').after('<tr><td></td><td></td><td>' + myAlpha + </td></tr>'); // add a row with the value of the checkbox in the last col
        } else {
            $('table tbody tr td:contains(myAlpha)').closest('tr').remove(); // remove the row that has the value of the checkbox in the last col
        }
    });
});

Answer 2

您可以this.checked在 if 语句中使用来查看复选框是否被选中：

j$('#sfiltersb li label input[type="checkbox"]').change(function(){
    if (this.checked) {
        //add row (sample row)
        $(this).closest("tr").after("<tr><td>New row</td></tr>");
    }
});

Answer 3

基于此 HTML：

<table id="table">
    <tr id="1"><td>a</td><td>b</td><td>c</td></tr>
    <tr id="2"><td>D</td><td>E</td><td>F</td></tr>
</table>

<input type="checkbox" class="check" value="item1" />
<input type="checkbox" class="check" value="item2" />

此代码将根据行的 id 和复选框的值删除行：

$('.check').bind("change", function(){
    if($(this).is(':checked')){
        $('#table tr#'+$(this).val().substring(4)).remove();
    }
});

这$(this).val().substring(4)将获得前面没有“项目”的复选框的值。如果您的复选框具有值item78，则将删除 id 为 78 的行。

这里有一个小提琴