javascript - 如何使用 javascript 选中 1 个复选框取消选中另一个复选框，反之亦然？

Question

此处不使用单选按钮的原因是因为我希望该选项取消选中所有复选框，并且还有其他与选中和取消选中相关的行为。

选中第一个框后，将选择该行中的所有单选按钮。(参见此处How to use javascript to select a row of radio buttons when a checkbox is selected)

取消选中第一个按钮时，该行中的所有单选按钮都将被取消选择。

每当选中一个复选框时，另一个复选框就会自动取消选中。

我想也许我可以通过 css 类来做到这一点。因此，每当选中类中的一个复选框时，其他复选框就会自动取消选中。

我正在想象这样的代码:

function uncheckOther(row_id) {
        var row = document.getElementById(row_id)
    var theClassName = row.className;
    var classGroup = document.getElementsByClassName(theClassname);
    for(var i=0; i<classGroup.length; i++) {
        if(classGroup[i].id != row_id) {
            classGroup[i].radio = unchecked;
        }
    }
}

我该怎么做？下面是示例 HTML，其中 tr 元素中包含 id 和类，第一个子 td 元素中包含复选框:

<form name="form3" action="testfile4.php" method="get">
<table border="1"><thead>
    <tr><th>Select entire row</th><th>item_code</th><th>page</th><th>usd_dn</th></tr>
</thead>
<tbody>
    <tr id="534" class="15838">
        <td ><input type="checkbox" onclick="select_row(534);"></td>        <td>15838         <input type="radio" name="15838|item_code" value="534" /></td>
        <td>284<input type="radio" name="15838|page" value="534" /></td>
        <td>$73.00<input type="radio" name="15838|usd_dn" value="534" /></td>
    </tr>
    <tr id="535" class="15838">
        <td ><input type="checkbox" onclick="select_row(535);"></td>        <td>15838         <input type="radio" name="15838|item_code" value="535" /></td>
        <td>299
          <input type="radio" name="15838|page" value="535" /></td>
        <td>$73.00<input type="radio" name="15838|usd_dn" value="535" /></td>
    </tr>
    <tr id="565">
        <td ><input type="checkbox" onclick="select_row(565);"></td>        <td>1611          <input type="radio" name="1611|item_code" value="565" /></td>
        <td>66<input type="radio" name="1611|page" value="565" /></td>
        <td>$3,350.00
          <input type="radio" name="1611|usd_dn" value="565" /></td>
    </tr>
    <tr id="566">
        <td ><input type="checkbox" onclick="select_row(566);"></td>        <td>1611          <input type="radio" name="1611|item_code" value="566" /></td>
        <td>66<input type="radio" name="1611|page" value="566" /></td>
        <td>$3,225.00
          <input type="radio" name="1611|usd_dn" value="566" /></td>
    </tr>
    </tbody>
    </table>
    </form>

我同意 jquery 答案，但目前更喜欢纯 JavaScript。

Answer 1

有很多理由使用复选框而不是单选按钮......

if ($('#myDivID').attr('checked'))

这会告诉您是否已检查。要循环遍历所有内容，并仅保留当前选中的一项，您可以在 $(document).ready() 函数中执行类似的操作:

$('input[type="checkbox"]').click(function () {
    $('input[type="checkbox"]').attr('checked', false);
    $(this).attr('checked', true);
});

任何选中的复选框都将保持选中状态。其余的将被取消选中。