Setting a radio option to 'checked,' but value comes back 'undefined?'

Question

<div id="use-same-address-selection-container" class="input-field">
     <label for="delivery-same">Use Same Address?</label>
        <div class="picker">
           <span class="radio-wrap">
               <input type="radio" name="delivery-same" id="delivery-same-yes" value="yes" class="same-address-picker"><label for="delivery-same-yes">YES</label>
         </span>
         <span class="radio-wrap">
              <input type="radio" name="delivery-same" id="delivery-same-no" value="no" class="same-address-picker"><label for="delivery-same-no">NO</label>
         </span>
      </div>
</div>

I know there are similar questions here, but I've looked through tons of answers and articles and have not found a solution or explanation for my situation yet.

I am attempting to set the 'checked' attribute of a type=radio input in this way:

$("#use-different-address").prop('checked', true);

Then, in the line immediately underneath, I print out an alert to see the value of the 'checked' attribute, and am continuously getting back 'undefined.'

alert("Value of the checked property for use-different-address = " + $("#use-different-address").prop('checked'));

I've been moving it all around the document to try it in different places in the execution flow, tried putting it in a $(document).ready(), rolling it into other custom functions, using alternative syntax (e.g., attr instead of prop), but nothing has allowed me to set this to 'checked' automatically when the page loads.

Oddly enough, when I click one of the options manually, the box gets checked and acts normal from then on (I can change the selection, functions trigger off of the changes normally, etc.) until I refresh or return to the page, after which neither option is checked and the values for 'checked' are 'undefined' again.

Note: I'm not trying to simply set a 'checked' default, so doing something like putting 'checked=true' in the HTML for the input will not work; it is supposed to be set based on whether or not a sessionStorage variable is set (I can set and successfully read this value, so that's not the issue), so I need to be able to change the value of the'checked' property after that sessionStorage variable is detected.

You'll need to show a lot more code because what you have described works fine https://codepen.io/pjabbott/pen/gGQWMx — Paul Abbott, Oct 16 '17 at 21:55
what jquery version are you using? if it is before 1.6 you need to use the `.attr("checked", "checked")` But, more code/context would be helpful https://stackoverflow.com/a/19630917/8222554 — stephen, Oct 16 '17 at 21:56
You need to do .trigger('change'). Pls see the answer here: https://stackoverflow.com/questions/10159214/why-does-dynamically-changing-a-checkbox-not-trigger-a-form-change-event — Rajalakshmi P, Oct 16 '17 at 22:09
Thank you all for responding. I added the HTML code. I can't show all of the code that's involved because it's enormous; I realize that this means I may not get an answer here, but I'm just wondering if anyone else has seen something like this that may have an idea without reading every single line of what's interacting here. I will try to work with the .trigger('change') selection, because I'm not totally familiar with it, but since this is supposed to persist the state of the input selection (rather than alter it based on a change event), I'm not sure if it will be what I need. — scoffin, Oct 16 '17 at 22:28

mscdeveloper · Answer 1 · 2017-10-16T22:40:47.273

$('#use_different_address').prop('checked', true);

function is_radio_cheked(_radio){
   if ($(_radio).is(':checked')){
     return true;
   }else{
    return false;
   }
}

function is_my_radio_value(){
 console.log( [ is_radio_cheked($('#use_different_address')), is_radio_cheked($('#not_use_different_address')) ]);
}

  console.log(is_radio_cheked($('#use_different_address')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


  <label><input type="radio" name="my_name"  id="use_different_address" onClick="is_my_radio_value();">YES</label>
  <label><input type="radio" name="my_name"  id="not_use_different_address" onClick="is_my_radio_value();">NO</label>

Thank you for responding... I wasn't able to get this to work for me, but I was able to finally find the right place in the code to put the block to make it work! — scoffin, Oct 17 '17 at 16:09

Setting a radio option to 'checked,' but value comes back 'undefined?'

1 Answers1