Only allow 1 checkbox to be selected.

[samndi]

Good Afternoon,

I have 7 checkboxes on a form. I want to only allow 1 of those to be selected. So, when a user selects 1 all others should be hidden. I am a bit confused about where I would put the code to do this....here is the code I currently have that allows the user to add some text when a checkbox is selected:

function HideComments() 
  {
  var a1 = document.getElementById("crmForm_answer1").checked; 
  var a2 = document.getElementById("crmForm_answer2").checked; 
  var a3 = document.getElementById("crmForm_answer3").checked; 
  var a4 = document.getElementById("crmForm_answer4").checked; 
  var a5 = document.getElementById("crmForm_answer5").checked; 
  var a6 = document.getElementById("crmForm_answer6").checked; 
  var a7 = document.getElementById("crmForm_answer7").checked;
 
  if(a1==true)
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';

  if(a2==true)
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';

  if(a3==true)
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';

  if(a4==true)
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';

  if(a5==true)
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';

  if(a6==true)
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';

  if(a7==true)
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
  else
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';
  }

Thanks in advance,
Sam

 

[ier506]

Let me give you an idea:

<script type="text/javascript">

function ch(checked){

for (var i=1; i<=4; i++){

if (checked!=document.getElementById("c"+i).value){ 

document.getElementById("c"+i).style.visibility="hidden"; 

}

}

}


</script>


<input type="checkbox" id="c1" value="1" onclick="ch(this.value)"/>First    <br />
<input type="checkbox" id="c2" value="2" onclick="ch(this.value)"/>Second   <br />
<input type="checkbox" id="c3" value="3" onclick="ch(this.value)"/>Third    <br />
<input type="checkbox" id="c4" value="4" onclick="ch(this.value)"/>Fourth   <br />

By clicking any of these checkboxes all the other will disappear. It's just and idea feel free to change and optimize!