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。公共数据必须包含在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

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

<强> 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;
            }  
        }
    }
}

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

1 个答案: