Question

我有一个带有列和行复选框的表格矩阵。每行和每列都有一个＆＃34;标题＆＃34;复选框，触发相关行或列上的全部选择。

现在我可以用不少于6个单独的jQuery点击功能实现我想要的......

HTML

<tr>
        <th></th>
        <th>Column 1 Heading <input type="checkbox" id="c1Button" class="c1" /></th>
        <th>Column 2 Heading <input type="checkbox" id="c2Button" class="c2" /></th>
        <th>Column 3 Heading <input type="checkbox" id="c3Button" class="c3" /></th>
    </tr>
    <tr>
        <td>Row 1 Heading <input type="checkbox" id="r1Button" class="r1" /></td>
        <td><input type="checkbox" class="c1 r1" value=""/></td>
        <td><input type="checkbox" class="c2 r1" value=""/></td>
        <td><input type="checkbox" class="c3 r1" value=""/></td>
    </tr>
    <tr>
        <td>Row 2 Heading <input type="checkbox" id="r2Button" class="r2" /></td>
        <td><input type="checkbox" class="c1 r2" value=""></td>
        <td><input type="checkbox" class="c2 r2" value=""></td>
        <td><input type="checkbox" class="c3 r2" value=""></td>
    </tr>
    <tr>
         <td>Row 3 Heading <input type="checkbox" id="r3Button" class="r3" /></td>
         <td><input type="checkbox" class="c1 r3" value=""></td>
         <td><input type="checkbox" class="c2 r3" value=""></td>
         <td><input type="checkbox" class="c3 r3" value=""></td>
    </tr>

JQuery的

$("#c1Button").click(function () {
        $(".c1").prop('checked', $(this).prop('checked'));
    });
$("#c2Button").click(function () {
        $(".c2").prop('checked', $(this).prop('checked'));
    });
$("#c3Button").click(function () {
        $(".c3").prop('checked', $(this).prop('checked'));
    });
$("#r1Button").click(function () {
        $(".r1").prop('checked', $(this).prop('checked'));
    });
$("#r2Button").click(function () {
        $(".r2").prop('checked', $(this).prop('checked'));
    });
$("#r3Button").click(function () {
        $(".r3").prop('checked', $(this).prop('checked'));
    });

我对jQuery并不精通，而我的谷歌搜索和令人尴尬的尝试使这一功能都失败了。

添

Answer 1

1000种皮肤猫的方法。这可能会奏效使用伪属性添加类列和行，如下所示

<tr>
        <th></th>
        <th>Column 1 Heading <input type="checkbox" id="c1Button" class="c1 column" colid="c1" /></th>
        <th>Column 2 Heading <input type="checkbox" id="c2Button" class="c2 column" colid="c2" /></th>
        <th>Column 3 Heading <input type="checkbox" id="c3Button" class="c3 column" colid="c3" /></th>
    </tr>
    <tr>
        <td>Row 1 Heading <input type="checkbox" id="r1Button" class="r1 row" rowid="r1" /></td>
        <td><input type="checkbox" class="c1 r1" value=""/></td>
        <td><input type="checkbox" class="c2 r1" value=""/></td>
        <td><input type="checkbox" class="c3 r1" value=""/></td>
    </tr>
    <tr>
        <td>Row 2 Heading <input type="checkbox" id="r2Button" class="r2 row" rowid="r2" /></td>
        <td><input type="checkbox" class="c1 r2" value=""></td>
        <td><input type="checkbox" class="c2 r2" value=""></td>
        <td><input type="checkbox" class="c3 r2" value=""></td>
    </tr>
    <tr>
         <td>Row 3 Heading <input type="checkbox" id="r3Button" class="r3 row" rowid="r3" /></td>
         <td><input type="checkbox" class="c1 r3" value=""></td>
         <td><input type="checkbox" class="c2 r3" value=""></td>
         <td><input type="checkbox" class="c3 r3" value=""></td>
    </tr>

然后使用jQuery

$(".column").click(function(){
    var colid = $(this).attr("colid");
    $("." + colid).prop('checked', $(this).prop('checked'));
});
$(".row").click(function(){
    var rowid = $(this).attr("rowid");
    $("." + rowid).prop('checked', $(this).prop('checked'));
});

Answer 2

无需更改标记即可更改jquery代码，如下所示

$(document).ready(function () {
    $('tr:first input').click(function () {
        var colno = 1+Number.parseFloat($(this).attr('id')[1]);
        $('td:nth-child(' + colno + ') input').prop('checked', $(this).prop('checked'));
    });

    $('td:nth-child(1) input').click(function (){
        var rowno = 1 + Number.parseFloat($(this).attr('id')[1]);
        $('tr:nth-child(' + rowno + ') input').prop('checked', $(this).prop('checked'));
    });
});

Jquery选择所有行和列矩阵

2 个答案: