How to use javascript to have checking 1 checkbox uncheck the other and vice versa?

1
votes

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.

2
javascriptjquery
It's also possible to have all radio buttons unchecked. I just don't see a compelling case here to use checkboxes in favor of radio buttons. - NullUserException
Well, the problem is that the user cannot go from "one radio button checked" to "no radio buttons checked" using ordinary browser controls. That's as it should be: to me, a set of radio buttons with no buttons checked is a bug. That is a thing that should be clear to anybody with experience with real "radio buttons", which were mechanically interlinked such that it was not possible (short of breaking the radio) to have a no-buttons-checked situation. - Pointy
The checkboxes are controls as I mentioned. I'm sure none of you have come across a reason for the behavior I'm looking for, but it seems to be the simplest behavior from a UI perspective. An alternative for me would be "check all" and "uncheck all" instead of the checkbox, but that takes up a lot more space, doesn't it? I can use radio buttons, but I need a way to click on it to UNcheck it. That is the key. - Buttle Butkus
@Pointy - I agree with you that (GUI) radio buttons should always have one checked, but regarding "real" radio buttons back in the days that they were mechanically linked, the radio in our old car allowed none to be selected: if you pushed a button in halfway it didn't stick in but did pop out the previous selection...but then, "real" radio buttons had a different purpose given you could also ignore them and tune with the dial... - nnnnnn
And I've played with plenty of radio buttons and there were ways to trick them into all being deselected, just as nnnnnn said. But I tried using radio for my purposes and it works fine as long as there are only 2 rows to select between. But when there will be 3 or 4, a deselect-all option will be needed and I suppose I'll have to write an onlick() function that applies only to selected radios, that deselects them. - Buttle Butkus

2 Answers

0
votes

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.

0
votes

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.