Question

So this is the dumbest thing I’ve struggled with in awhile. I cannot get the state of a simple radio button set to toggle something on the page.

<label for="completeSw"><span>Completed?</span></label>
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes
<input type="radio" id="completeSw" name="completeSw" value="0" checked="checked"/>No<br/>

So you can see here an extremely simple yes/no radio button set to toggle an action. It needs to serve two purposes: to flag a yes/no value (1/0) in the POST data, and ideally trigger an action on the page using JS/jQuery. I’m having trouble with the latter.

The default state is “No”; if I click “Yes” I can retrieve an onchange or onclick event state and make something happen. However, this is a one-way switch; I cannot retrieve a state going back to the “No” selector once I’ve gone to “Yes”. What I need to be able to do is show / hide an element on the page depending on what choice they’ve made in this radio set. If I click “Yes”, I can trigger the action and see the page change. Once I click “No”, however, it acts as if there was no state change and I cannot perform an action i.e. hide the element again.

I’ve tried variations on retrieving the “checked” state, the radio pair value, etc, e.g.

$("#completeSw").change(function(e){
    alert( $(this).attr("checked") ); // only triggers when "Yes" is selected
});

Perhaps I should not be using a yes/no radio pair, but instead be using a single checkbox? Seems more user-friendly and elegant this way (radio buttons) to me.

Answer 1

IDs must be unique, so it will only ever find the first one on your page. Use a class instead.