如何使用javascript選中1復選框取消選中另一復選框，反之亦然？

Question

之所以不使用單選按鈕，是因為我希望該選項不選中所有復選框，並且還有其他行為與選中和取消選中關聯。

選中第一個框時，將選擇該行中的所有單選按鈕。 （請參閱此處，選中復選框后如何使用javascript選擇單選按鈕行 ）

如果未選中第一個按鈕，則取消選擇該行中的所有無線電。

無論何時選中一個復選框，都應自動取消選擇另一個復選框。

我在想也許我可以在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和class，而第一個子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對象的文檔 。