如何使用javascript来检查1个复选框取消选中另一个，反之亦然？答案

【问题标题】：How to use javascript to have checking 1 checkbox uncheck the other and vice versa?如何使用javascript来检查1个复选框取消选中另一个，反之亦然？
【发布时间】：2011-11-28 01:57:00
【问题描述】：

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

选中第一个框时，将选中该行中的所有单选按钮。（见这里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;
        }
    }
}

我该怎么做？这是 tr 元素中带有 id 和类以及第一个子 td 元素中的复选框的示例 HTML：

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

【问题讨论】：

也可以取消选中所有单选按钮。我只是在这里没有看到一个令人信服的案例来使用复选框来支持单选按钮。
嗯，问题是用户不能使用普通浏览器控件从“选中一个单选按钮”变为“未选中单选按钮”。应该是这样：对我来说，一组没有选中按钮的单选按钮是一个错误。这是任何有真正“单选按钮”经验的人都应该清楚的事情，这些单选按钮是机械互连的，因此不可能（除非打破收音机）没有按钮 -检查情况。
复选框是我提到的控件。我敢肯定，你们都没有遇到我正在寻找的行为的原因，但从 UI 的角度来看，这似乎是最简单的行为。对我来说，另一种选择是“选中所有”和“取消选中所有”而不是复选框，但这会占用更多空间，不是吗？我可以使用单选按钮，但我需要一种方法来单击它以取消选中它。这是关键。
@Pointy - 我同意您的观点，即（GUI）单选按钮应该始终选中一个，但对于“真正的”单选按钮，在机械连接的日子里，我们旧车里的收音机不允许选择任何一个：如果您半按按钮，它不会粘住但确实弹出了先前的选择......但是，“真正的”单选按钮有不同的用途，因为您也可以忽略它们并调整表盘...
我玩过很多单选按钮，正如 nnnnnn 所说，有办法诱使它们全部被取消选择。但是我尝试将收音机用于我的目的，只要只有 2 行可供选择，它就可以正常工作。但是当有 3 或 4 个时，将需要取消全选选项，我想我必须编写一个仅适用于选定收音机的 onlick() 函数，取消选择它们。

标签： javascript jquery

【解决方案1】：

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

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

这会告诉你它是否被选中。要遍历所有内容，并且只保留当前选中的一项，您可以在 $(document).ready() 函数中执行类似的操作：

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

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

【讨论】：

【解决方案2】：

原生方式是使用复选框 dom 对象上的 checked 属性：

document.getElementById("checkboxId").checked = false;

或者，切换：

var cb = document.getElementById("checkboxId");
cb.checked = !cb.checked;

这里是复选框 dom 对象的documentation，如果你不想使用 jQuery。

【讨论】：