0

我正在研究一些 jquery，它将检查共享相同 ID 的 html 复选框

<span class="idclass"><input type="checkbox" class="idleft" name="selectALL" value="WLEVEL04"> Select All </span>


<td class="left"><input type="checkbox" name="unchecked[]" value="499703"></td>
<td class="left"><input type="checkbox" name="unchecked[]" value="855155"></td>
<td class="left"><input type="checkbox" name="unchecked[]" value="234203"></td>
<td class="left"><input type="checkbox" name="unchecked[]" value="489741"></td>

这是我的jQuery

    $(".idleft").live('click', function () {
        var id = $(this).val();
        $(this).attr('tr').val(id).find(':checkbox').attr('checked', this.checked);
        });
4

2 回答 2

2

我相信这样的东西是你正在寻找的：

小提琴：http: //jsfiddle.net/tymeJV/3GkT3/

问：

$(".idleft").change(function() {
    if (this.checked) {
        $("input[name^='unchecked']").each(function() {
            $(this).prop("checked", true);
        });
    } else {
        $("input[name^='unchecked']").each(function() {
            $(this).prop("checked", false);
        });
    }
});
于 2013-05-09T19:43:34.547 回答
0

一个简单的解决方案：

$('input[type="checkbox"]').change(function(){
    var self = this,
        checked = self.checked,
        elClass = self.className.replace('id','');
    $('td.' + elClass).find('input[type="checkbox"]').prop('checked',checked);
});

JS 小提琴演示。

如果复选框有一个类名（在这种情况下）并且该类名减去部分，则此方法有效（并且易于扩展），并且该类名与元素的类名相同。idleftidtd

然而，使用下面的 HTML 更容易id（而不是可能必须过滤潜在的类名列表并避免使用该replace()方法）：

<table>
    <tbody>
        <tr>
            <td><span class="idclass"><input type="checkbox" id="left" class="idleft" name="selectALL" value="WLEVEL04" />Select All</span></td>
            <td class="left"><input type="checkbox" name="unchecked[]" value="499703" /></td>
            <td class="left"><input type="checkbox" name="unchecked[]" value="855155" /></td>
            <td class="left"><input type="checkbox" name="unchecked[]" value="234203" /></td>
            <td class="left"><input type="checkbox" name="unchecked[]" value="489741" /></td>
        </tr>
        <tr>
            <td><span class="idclass"><input type="checkbox" id="different" class="iddifferent" name="selectALL" value="WLEVEL04" />Select All</span></td>
            <td class="different"><input type="checkbox" name="differentName[]" value="499703" /></td>
            <td class="different"><input type="checkbox" name="differentName[]" value="855155" /></td>
            <td class="different"><input type="checkbox" name="differentName[]" value="234203" /></td>
            <td class="different"><input type="checkbox" name="differentName[]" value="489741" /></td>
        </tr>
    </tbody>
</table>

使用以下（仅略微修改）jQuery：

$('input[type="checkbox"]').change(function(){
    var self = this,
        checked = self.checked,
        elClass = self.id;
    $('td.' + elClass).find('input[type="checkbox"]').prop('checked',checked);
});

JS 小提琴演示。

参考：

于 2013-05-09T19:50:22.603 回答