Unchecking checkbox when another is checked

Discussion in 'JavaScript' started by x0x, Jan 23, 2010.

  1. #1
    <input type="checkbox" name="option1" value="one" checked> one<br>
    <input type="checkbox" name="option2" value="two"> two<br>
    <input type="checkbox" name="option3" value="two"> tree<br>
    HTML:
    Lets say I have three checkboxes. If the first checkbox is checked the other cannot. So, when they select the second or third checkbox, the first one should be automatically unchecked. Is that possible? Please note that the second and third checkbox can be both checked at the same time. First one is checked by default.
     
    x0x, Jan 23, 2010 IP
  2. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #2
    I would suggest using Radio instead of checkbox unless there is a strong reason behind it.

    changing above code something like below will solve the purpose..

    
    <input type="radio" name="option[]" value="one" checked> one<br>
    <input type="radio" name="option[]" value="two"> two<br>
    <input type="radio" name="option[]" value="two"> tree<br>
    
    HTML:
    If at all you have to do it using checkbox only, then javascript will have to do the trick :)
     
    mastermunj, Jan 23, 2010 IP
  3. x0x

    x0x Well-Known Member

    Messages:
    510
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #3
    I thought checkboxes would be the best choice because I need to be able to have more than one checkbox checked at the same time. But not with the first one...

    Example:

    <input type="checkbox" name="option1" value="one" > one<br>
    <input type="checkbox" name="option2" value="two" checked> two<br>
    <input type="checkbox" name="option3" value="two" checked> tree<br>

    but not:

    <input type="checkbox" name="option1" value="one" checked> one<br>
    <input type="checkbox" name="option2" value="two" checked> two<br>
    <input type="checkbox" name="option3" value="two" checked> tree<br>


    But I guess I can make more options and just make radios.

    mastermunj - you've been very helpful in multiple topics of mine :) Thanks.

    Any ideas about the "Would I be able to do this?" topic?
     
    x0x, Jan 23, 2010 IP
  4. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try the code below,

     
    unigogo, Jan 24, 2010 IP
  5. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Put the code at the end of body tag enclosed with <script> ... </script>
     
    unigogo, Jan 24, 2010 IP
  6. x0x

    x0x Well-Known Member

    Messages:
    510
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #6
    Thanks!! Works perfectly.
     
    x0x, Jan 25, 2010 IP
  7. Rigaconnect

    Rigaconnect Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #7
    Excuse me, may be not related question.
    What is target.nodeType == 3?
    What means == 3?
    I changet it to 2 or 20 and script works in the same way (no differences)
     
    Rigaconnect, Dec 30, 2012 IP
  8. jevan

    jevan Guest

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #8
    Great code. However I noticed a minor thing:

    if ((el==ck2) || (el==ck2)) {
    ck1.checked = false;
    }

    I think this should be:

    if ((el==ck2) || (el==ck3)) {
    ck1.checked = false;
    }

    You've probably already noticed this.
     
    jevan, Jan 2, 2013 IP
  9. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #9
    nodeType 3 is a text node. 2 is an attribute node. I don't think 20 is a valid node type.
     
    Rukbat, Jan 2, 2013 IP