CODEWITHSUNDEEP
jquerydominputradio-button
jeffkee
jeffkee

Reputation: 5238

How to change the selected Radio button dynamically with jQuery

Imagine I have a few rows of radio boxes, with 4 options each... 1, 2, 3 and a blank value. 

<input name="addons_1[23]" type="radio" value="1" />
<input name="addons_1[23]" type="radio" value="2" />
<input name="addons_1[23]" type="radio" value="3" />
<input name="addons_1[23]" type="radio" value="" />

<input name="addons_1[32]" type="radio" value="1" />
<input name="addons_1[32]" type="radio" value="2" />
<input name="addons_1[32]" type="radio" value="3" />
<input name="addons_1[32]" type="radio" value="" />

<input name="addons_1[45]" type="radio" value="1" />
<input name="addons_1[45]" type="radio" value="2" />
<input name="addons_1[45]" type="radio" value="3" />
<input name="addons_1[45]" type="radio" value="" />

<input name="addons_1[46]" type="radio" value="1" />
<input name="addons_1[46]" type="radio" value="2" />
<input name="addons_1[46]" type="radio" value="3" />
<input name="addons_1[46]" type="radio" value="" />

<input name="addons_1_noneed" id="addons_1_noneed" type="checkbox" /><label for="addons_1_noneed">Addons not needed.</label>

In this case, I want to set it so that when the input checkbox at the end (id=addons_1_noneed) is checked ON, I would like to have the radioboxes (all of them) to ahve the 4th one checked (where value=""). And based on the code, I cannot change it to have a non-empty value.

So the function I have tried the following functions on the click function attached to #addons_1_noneed element:

$('#addons_1_noneed').click(function(){
   $("input[name='addons_1[]'] option[value='']").each(function({
      $(this).attr("selected","selected");
   });
});

Did not work. 

$('#addons_1_noneed').click(function(){
   $("input[name='addons_1[]']").each(function({
      $(this).val('');
   });
});

Didn't work either.

What am I missing?

Upvotes: 2

Views: 8007

Answers (2)

kiran vennampelli
kiran vennampelli

Reputation: 13

var notesStatusValue = '<c:out value="${tradeMarkWatchReportSearchDto.notesStatusValue}"/>' ;
        jq("input:radio[name=notes]").each(function(){
            if(jq(this).val() == notesStatusValue) {
                jq(this).attr('checked','checked');
            }
        });

<input type="radio" name="notes" id="notes" value="Y">
                    <spring:message code="tm.report.search.added" text="DEBUG: Added" />
                    <input type="radio" name="notes" id="notes" value="N">
                    <spring:message code="tm.report.search.none" text="DEBUG: None" />
                    <input type="radio" name="notes" id="notes" value="ignore">
                    <spring:message code="tm.report.search.ignore" text="DEBUG: Ignore" />

Upvotes: 0

riemove
riemove

Reputation: 43

$(document).ready(function(){
    $('#addons_1_noneed').click(function(){
        if($(this).attr('checked')=="checked"){
            $('input:radio').attr('checked', true);
        }else{
            $('input:radio').attr('checked', false);
        }

    });
});

demo : http://jsfiddle.net/bNcRn/1/

Upvotes: 4

Related Questions