javascript - 选择所有复选框 - 但仅选择具有相同表格单元格值的复选框

Question

希望我能够解释这一点，而不会使问题变得过于复杂，所以请耐心等待。我已经知道如何编写一些 JavaScript 来选择表单中的所有复选框，但是您将如何执行以下操作？

这是代码:

<tr>
    <td>
        <input type="checkbox" name="array[]" value="value1"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Bob
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="array[]" value="value2"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Bob
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="array[]" value="value3"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Fred
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="array[]" value="value4"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Jack
    </td>
</tr>

我希望能够选择/取消选择与“Bob”相关的所有复选框，但不能选择/取消选择与 Jack 或 Fred 相关的复选框。公共(public)数据必须包含在 TD 元素内。这可能吗？

如果有人可以提供帮助，那就太好了!

非常感谢您的回复 subhaze，但我没有太多运气让它工作，现在这是我的代码:

function selectBOB() {
    var trs = document.getElementsByTagName('tr');
    for( var i = 0; i < trs.length; i++ ) {
        var tds = trs[i].getElementsByTagName('td');
        for( var k = 0; k < tds.length; k++ ) {
            if( tds[k].innerText == 'Bob' ) {
                trs[i].getElementsByTagName('input')[0].checked = 'checked'; 
            }  
        }
    }
}

<input type="checkbox" name="sAll" onclick="selectBOB(this)" /> Select Bob

Answer 1

这不是一个 super 灵活的解决方案，因为它依赖于您的标记来保持该格式，但可能会让您朝着正确的方向前进。

<强> Live example

HTML

<input id="select" type="checkbox" data-name="Bob" onClick="setChecks(this)"  /><label>Select all Bobs </label><br />
<input id="select" type="checkbox" data-name="Fred" onclick="setChecks(this)" /><label>Select all Freds </label><br /><br />
<table id="myTable" >
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value1" />
            </td>
            <td>Some Field</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value2" />
            </td>
            <td>Some Field</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value3" />
            </td>
            <td>Some Field</td>
            <td>Fred</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value4" />
            </td>
            <td>Some Field</td>
            <td>Jack</td>
        </tr>
    </tbody>
</table>

JavaScript

function setChecks( checkboxElem ) {
    var trs = document.getElementById('myTable').getElementsByTagName('tr');
    for( var i = 0; i < trs.length; i++ ) {
        var tds = trs[i].getElementsByTagName('td');
        for( var k = 0; k < tds.length; k++ ) {
            if( tds[k].innerText == checkboxElem.getAttribute('data-name') 
                || tds[k].textContent == checkboxElem.getAttribute('data-name')) {

                trs[i].getElementsByTagName('input')[0].checked = checkboxElem.checked;
            }  
        }
    }
}