Radiobutton /Checkbox ??

[Soti]

Hello all,
I have to develop a usability survey for a website. Some of the questions are supposed to allow the user to choose more then one answer thus calling for checkboxes. Other questions are allowed only one answer, requiring radio buttons, correct? This is the dilemma - we wan the survey to appear consistent. Is there a way to use checkboxes but, with certain questions, only allow one selection? Or, is there a way to allow more then one radio button to be checked off? If neither is possible, how can I develop a consistent looking survey?

Thank you all for suggestions.

 

[mwolf00]

Use checkboxes.
<script>
function checkBoxes(inBox){
if (inBox.name.substr(0,1) == &quot;r&quot{
if (inBox.checked == true){
thisQuestion = inBox.name.substr(1,1)
thisBox = inBox.name.substr(3,1)
for (x=0; x<=4; x++){
if (x != thisBox) {
eval(&quot;document.myForm.r&quot; + thisQuestion + &quot;_&quot; + x + &quot;.checked = false&quot
}
}
}
}
}

</script>
Question 1:
<input type=checkbox name=&quot;c1_0&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_1&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_2&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_3&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_4&quot; onBlur=&quot;checkBoxes(this)&quot;>

Question 2:
<input type=checkbox name=&quot;r2_0&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_1&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_2&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_3&quot; onBlur=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_4&quot; onBlur=&quot;checkBoxes(this)&quot;>


You could also do this with arrays or the form object.
-----------------------------------------------------------------
Be nice. It's only doing what you tell it to do.
mikewolf@tst-us.com

 

[Soti]

Thanks, mwolf00, but with your example I am able to check off more then one check box at a time. Is there a way to prevent this?

Thanks!

 

[Tarwn]

How about this:

function checkOne(elem){
   var nm = elem.name;
   var cnt = document.getElementsByName(nm).item.length;
   for(var i = 0;i<cnt;i++){
      document.getElementsByName(nm).item[i].checked=false;
   }
   elem.checked = true;
}

.
.
.
Only Select One:<br>
Yes <input type=&quot;checkbox name=&quot;group_1&quot; onClick=&quot;checkOne(this);&quot;><br>
No <input type=&quot;checkbox name=&quot;group_1&quot; onClick=&quot;checkOne(this);><br>
Maybe <input type=&quot;checkbox name=&quot;group_1&quot; onClick=&quot;checkOne(this);><br>
<br>
Select All That Apply:<br>
Blue <input type=&quot;checkbox name=&quot;group_color&quot;><br>
Red <input type=&quot;checkbox name=&quot;group_color&quot;><br>
Purple <input type=&quot;checkbox name=&quot;group_color&quot;><br>
<br>
Select One:<br>
Less than 18 <input type=&quot;checkbox name=&quot;group_age&quot; onClick=&quot;checkOne(this);&quot;><br>
18 to 35 <input type=&quot;checkbox name=&quot;group_age&quot; onClick=&quot;checkOne(this);><br>
35 to 210 <input type=&quot;checkbox name=&quot;group_age&quot; onClick=&quot;checkOne(this);><br>
greater than 210 <input type=&quot;checkbox name=&quot;group_age&quot; onClick=&quot;checkOne(this);><br>

This way any group you want to have as a checkOne group will be checkone only, any other group that doesn't have the onClick's will be check as many as you want. I think in principle it is similar to mwolf's, we just think differantly
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[Soti]

Tarwin, thanks for the help, but I can still select more then one in all the questions. I tried to modify the script a little, but it was no help! err, this is sooo frustrating, there has to be a way?!

Any other ideas??

Thanks so much!

 

[Tarwn]

Ok, after puttin in all the missing quotes and getting rid of the unnecessary items in the javascript:

<html>
<heaD>
<script language=&quot;JavaScript&quot;>
<!--
function checkOne(elem){
   var nm = elem.name;
   var cnt = document.getElementsByName(nm).length;
   for(var i = 0;i<cnt;i++){
      document.getElementsByName(nm)[i].checked=false;
   }
   elem.checked = true;
}
//-->
</script>
</head>
<body>
Only Select One:<br>
Yes <input type=&quot;checkbox&quot; name=&quot;group_1&quot; onClick=&quot;checkOne(this);&quot;><br>
No <input type=&quot;checkbox&quot; name=&quot;group_1&quot; onClick=&quot;checkOne(this);&quot;><br>
Maybe <input type=&quot;checkbox&quot; name=&quot;group_1&quot; onClick=&quot;checkOne(this);&quot;><br>
<br>
Select All That Apply:<br>
Blue <input type=&quot;checkbox&quot; name=&quot;group_color&quot;><br>
Red <input type=&quot;checkbox&quot; name=&quot;group_color&quot;><br>
Purple <input type=&quot;checkbox&quot; name=&quot;group_color&quot;><br>
<br>
Select One:<br>
Less than 18 <input type=&quot;checkbox&quot; name=&quot;group_age&quot; onClick=&quot;checkOne(this);&quot;><br>
18 to 35 <input type=&quot;checkbox&quot; name=&quot;group_age&quot; onClick=&quot;checkOne(this);&quot;><br>
35 to 210 <input type=&quot;checkbox&quot; name=&quot;group_age&quot; onClick=&quot;checkOne(this);&quot;><br>
greater than 210 <input type=&quot;checkbox&quot; name=&quot;group_age&quot; onClick=&quot;checkOne(this);&quot;><br>
</body>
</html>

I apologize the first post was on the fly so had some minor mistakes in it.
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[Tarwn]

After changing the onBlurs to onClicks (otherwise you geta strange double-selection thing going on, quite cool actually) and adding in the form tag that is referenced in the script, here is mwolfs:

<html>
<heaD>
<script language=&quot;JavaScript&quot;>
<!--
function checkBoxes(inBox){
  if (inBox.name.substr(0,1) == &quot;r&quot;){
    if (inBox.checked == true){
      thisQuestion = inBox.name.substr(1,1) 
      thisBox = inBox.name.substr(3,1) 
      for (x=0; x<=4; x++){
        if (x != thisBox) {
          eval(&quot;document.myForm.r&quot; + thisQuestion + &quot;_&quot; + x + &quot;.checked = false&quot;)
        }
      }
    }
  }
}
//-->
</script>
</head>
<body>
<form name=&quot;myForm&quot;>
Question 1:
<input type=checkbox name=&quot;c1_0&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_1&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_2&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_3&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;c1_4&quot; onClick=&quot;checkBoxes(this)&quot;>

Question 2:
<input type=checkbox name=&quot;r2_0&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_1&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_2&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_3&quot; onClick=&quot;checkBoxes(this)&quot;>
<input type=checkbox name=&quot;r2_4&quot; onClick=&quot;checkBoxes(this)&quot;>
</form>
</body>
</html>

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[Soti]

Awesome!! No need to apologize, you really help me out!

just one problem...doesn't work in Netscape! Any idea why?

 

[Tarwn]

Probably the javascript. --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[Soti]

Oops, the <form> would help =)

Thanks for your help!! You get a star!