Help with checkbox

Discussion in 'JavaScript' started by cris02, Sep 27, 2010.

0
  1. #1
    Hi,

    I have two check box fields I want this check box act like a radio button. when i checked the first checkbox automatically one check box will become uncheck? how can i done this with javascript. thanks

    
<div class="input"><input type="checkbox" name="checkbox3" value="checkbox" class="styled"/>YES</div>
<div class="input"><input type="checkbox" name="checkbox22" value="checkbox" class="styled"/>NO</div
    Code (markup):
     
    cris02, Sep 27, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Here is an example script which does something like that:

    
<html>

<head>
  <title>Checkboxes</title>
  <script type="text/javascript">
  function checkbox_clicked(checkbox_id){
    if(checkbox_id=="checkbox_yes"){
        if(document.getElementById("checkbox_yes").checked){
            document.getElementById("checkbox_no").checked = false;  
        }else{
            document.getElementById("checkbox_no").checked = true;
        }
    }

    if(checkbox_id=="checkbox_no"){
        if(document.getElementById("checkbox_no").checked){
            document.getElementById("checkbox_yes").checked = false;
        }else{
            document.getElementById("checkbox_yes").checked = true;
        }
    }
  }
  </script>
</head>

<body>

<div class="input"><input id="checkbox_yes" type="checkbox" name="checkbox3" value="checkbox" class="styled" onclick="checkbox_clicked(this.id);" />YES</div>
<div class="input"><input id="checkbox_no" type="checkbox" name="checkbox22" value="checkbox" class="styled" onclick="checkbox_clicked(this.id);"/>NO</div>

</body>

</html>
    Code (JavaScript):
     
    s_ruben, Sep 27, 2010 IP
  3. bigrollerdave

    bigrollerdave Well-Known Member

    Messages:
    2,112
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    140
    #3 
    
<script type="text/javascript">
	toggleCheckBox(){
		if(document.getElementById("checkbox3").checked){
			document.getElementById("checkbox3").checked = false;
			document.getElementById("checkbox22").checked = true;
		} else {
			document.getElementById("checkbox3").checked = true;
			document.getElementById("checkbox22").checked = false;
		}
	}
</script>

<div class="input"><input type="checkbox" name="checkbox3" id="checkbox3" value="checkbox" onchange="toggleCheckBox()" class="styled"/>YES</div>
<div class="input"><input type="checkbox" name="checkbox22" id="checkbox22" value="checkbox" onchange="toggleCheckBox()" class="styled"/>NO</div>
    Code (JavaScript):
     
    bigrollerdave, Sep 27, 2010 IP