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

Question

The reason not to use radio buttons here is because I want the option to have all checkboxes unchecked, and there are other behaviors linked to checking and unchecking.

When the 1st box is checked, all radio buttons in the row are selected. (see here How to use javascript to select a row of radio buttons when a checkbox is selected )

When the 1st button is unchecked, all the radios in that row are deselected.

Whenever a checkbox is checked, the other checkbox should automatically be deselected.

I'm thinking maybe I could do this by css class. So, whenever one checkbox in the class is checked, the others are automatically unchecked.

I'm imagining code like this:

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

How would I do this? Here's the example HTML with id's and classes in the tr elements, and checkboxes in the 1st child td elements:

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

I'm ok with jquery answers but prefer pure javascript at the moment.

Answer 1

There are plenty of reasons to use checkboxes instead of radio buttons...

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

This will tell you if it's checked. To loop through all, and keep only the current checked one checked, you could do something like this in the $(document).ready() function:

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

Any checkbox checked will STAY checked. The rest will be unchecked.

Answer 2

The native way would be to use the checked property that's on the checkbox dom object:

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

Or, to toggle:

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

Here's the documentation for the checkbox dom object, if you're trying to not use jQuery.