CODEWITHSUNDEEP
javascripthtmlcsscheckbox
DivineChef
DivineChef

Reputation: 1221

Selected Checkbox disables the selection of another checkbox

I have a reason to use checkboxes instead of radio buttons so please don't suggest I use radio buttons but need to duplicate the functionality. However when I select the Yes checkbox, it disables the No checkbox for some reason. When no is selected I want to hide the div and deselect Yes, and the opposite when I select Yes I want to show the div and uncheck NO. The only way I can select NO when Yes is checked is to uncheck it.

Working demo Here

JS Fiddle not working Here

Javascript

function injure() {
     if (document.getElementById("f2").checked == true) {
         document.getElementById("LocFall").style.display="block";
         document.getElementById("f1").checked = false;
     } else {
         if (document.getElementById("f1").checked == true) {
             document.getElementById("LocFall").style.display="none";
             document.getElementById("f2").checked = false;
         }
     }
}

CSS

#LocFall {
    display:none;   
}

HTML

    <input type="checkbox" id="f1" name=""  onclick="injure();">
    <label for="f1"> No </label><BR>
    <input type="checkbox" id="f2" name=""  onclick="injure();">
    <label for="f2"> Yes</label><BR>

    <div id="LocFall">
        Show some stuff
    </div>

Upvotes: 0

Views: 145

Answers (4)

Mike G
Mike G

Reputation: 36

http://jsfiddle.net/6NN6s/14/

<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>


function injure(cmb) {
    if (cmb.checked) {
        if(cmb.id==="f2")
        {   document.getElementById("LocFall").style.display = "block";
             document.getElementById("f1").checked = false;
        }
        else
        {
            document.getElementById("LocFall").style.display = "none";
            document.getElementById("f2").checked = false;
        }
    }    
}

try this out, may be what you need.

Upvotes: 2

krischan
krischan

Reputation: 1426

The problem stems from not knowing which checkbox was actually clicked inside the function. As it is there's only two different ways the function can respond: one if f1 is checked and one if f2 is checked. The problem is there's actually more possible states that you're trying to represent.

  1. State 1: Nothing checked, user clicks f1 or f2
  2. State 2: f1 checked, f2 clicked
  3. State 3: f2 checked, f1 clicked

Your code handles the first state fine but it can't deal properly with the second ones. If you split your code into two seperate functions to handle each box then you'll have all the necessary information to write correct decision logic.

There's also the states of clicking the same box, but they are simple and your code handles them already.

Upvotes: 0

Kvothe
Kvothe

Reputation: 396

Split injure into a different function for each; if you choose No, then you cannot choose Yes because of the way your function is set up - the first condition will always evaluate as true.

Upvotes: 0

Ivan Doroshenko
Ivan Doroshenko

Reputation: 942

In Fiddle change on the left in second drop-down list 'onLoad' to 'no wrap - in <head>'.

Upvotes: 1

Related Questions