Select only one checkbox (and deselect rest) and show input field if checkbox selected

Question

I have a form with "Yes" and "No" as two checkboxes. These come in unselected at first. I'd like the user to only select one of these with the option to deselect their choice if they don't want to make a decision (which is why I didn't use radio buttons). Selecting Yes should deselect No and vice versa. I'm not sure how to do this. I'm using PHP (codeigniter), Javascript and JQuery.

Secondly, after either Yes or No is selected, an input field needs to be displayed. I've got this setup but it toggles on the "onclick" action, which means selecting Yes twice shows and hides the input field! I want the input field to show if Yes or No are selected and disappear if the both Yes and No are unselected.

$do_toggle = "onClick=\"javascript:toggle('togglenote');\"";

echo form_radio('decision'.$key,'y',FALSE,$do_toggle)."Yes ";

echo form_radio('decision'.$key,'n',FALSE,$do_toggle)."No";

echo form_input($mytext);

// I put a div tag around the form_input above
// but it's not showing in the StackOverflow question...
// but it's there for the toggle to work.

As another option, you could add a all of them as `radio` buttons...and add a third one saying `none`..so when the user does not want to make a decision he can click on `none radio button` — Sangeet Menon, May 07 '11 at 12:27
Form gets built with many rows, each with a Yes or No option. Adding a None would be OK if it was just one row, but multiple decision rows each with a None selected by default makes for a poor UI. Unless you are suggesting a None that is selected and hidden by default? — zee, May 07 '11 at 12:41
http://stackoverflow.com/questions/1467228/click-toggle-with-jquery — mplungjan, May 07 '11 at 16:25

score 0 · Answer 1 · answered May 07 '11 at 12:47

Assuming your html is like this (i think it is):

<input type="checkbox" name="decisionY" value="y" /> Yes
<input type="checkbox" name="decisionN" value="N" /> Yes
<input type="text" id="togglenote" name="togglenote" />

Your js would be:

$(document).ready(function(){
  $(":checkbox[name^='decision']").change(function(){
     if($(this).is(":checked")){
        $(":checkbox[name[^='decision']").attr("checked", false); //Uncheck the other
        $(this).attr("checked", true);
        $("#togglenote").show();
     }
     if($(":checkbox[name^='decision']:checked").size() == 0){
        $("#togglenote").hide();
     }
  });
});

Hope this helps. Cheers.

The only trouble is that the checkbox has the same name for both a Yes value and a No value. i.e. name="decision" in both cases so that I can read the decision value when it gets submitted. I don't know how to uncheck the No if a Yes is selected if both have the same element name. I wonder if assigning them a different ID is the way to go here. — zee, May 07 '11 at 13:40

score 0 · Answer 2 · answered May 07 '11 at 12:51

This should do what you want:

$("#checkbox1").change(function() {

if ($(this).attr("checked") && $("#checkbox2").attr("checked")) {
   $("checkbox2").removeAttr("checked");
} else if ($(this).attr("checked")) {
   $("#inputfield").show();
} else {
   $("#inputfield").hide();
}
});


$("#checkbox2").change(function() {

if ($(this).attr("checked") && $("#checkbox1").attr("checked")) {
   $("checkbox1").removeAttr("checked");
} else if ($(this).attr("checked")) {
   $("#inputfield").show();
} else {
   $("#inputfield").hide();
}
});

score 0 · Answer 3 · answered May 07 '11 at 12:54

select one of them as jQuery or javascript
Dont think that this is 100% garantee that some hacker can't set up both and post :)
Analise $_REQUEST array against setted up both yes/no values
Make decision.

PS. JQuery works not at my nokia 6303c :) device, hard coded - will work ... so application must have 2 parts.

Select only one checkbox (and deselect rest) and show input field if checkbox selected

3 Answers3