Question

我正在研究一些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);
        });

Answer 1

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

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

JQ：

$(".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);
        });
    }
});

Answer 2

一个简单的解决方案：

$('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 Fiddle demo

如果复选框具有单个类名（在本例中为idleft）且该类名称减去{{}，则此工作（并且为easily scalable） 1}}部分，与id元素的类名相同。

但是，在给定以下HTML的情况下，使用td（而不是可能必须过滤潜在的类名列表，并避免id方法）更容易：< / p>

replace()

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

<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>

JS Fiddle demo

参考文献：

jquery选择共享相同tr id的所有复选框

2 个答案: