Question

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

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

我该怎么做？这是带有id元素和tr元素中的类的示例HTML，以及第1个子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);
});

选中的任何复选框都将保持选中状态。其余的将不受控制。

Answer 2

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

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

或者，要切换：

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

如果您尝试不使用jQuery，这是复选框dom对象的documentation。

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

2 个答案: