Set an ID for all radio buttons When the pages are loaded

I have a lot of radio button groups. I want to set all radio button ids as parent div id + itselves. As the radio buttons come from external HTML and in some cases I have to use the same buttons multiple times on the same page. My example code is below and when you select a radio button its id and form id are set correctly. Is there a way to do this automatically on page load and not based on selection?

<div id="x1" class="section">
  <form id="" class="myFormClass">
    <input id="" class="myRadio" name="someName-1" value="one">one
    <input id="" class="myRadio" name="someName-1" value="two">two
<div id="x2" class="section">
  <form id="" class="myFormClass">
    <input id="" class="myRadio" name="someName-2" value="three">three
    <input id="" class="myRadio" name="someName-2" value="four">four

  $(document).on('change', "input:radio", function(){
    var parentId = $(this).closest(".section").attr("id");
    var radioValue = this.value;
    var radioName =;
    $(this).parent("form").attr("id", parentId + radioName + "Form") 
    $(this).attr("id", parentId + "-" + radioValue);


And let me ask one more question. When I try to get some elements with a common attribute of them, I can only get the first element.

var iNeedYou = $("input:radio[name='someName-1']").val();


returns "one". Is there a way to get them all?



source to share

1 answer

Use $( document ).ready()

( $(function()

for brevity) to run the code on page load. Set your inputs to a value type='radio'

if you want switches.

For your additional question: you can use $('yourSelector').each(function(){

to select multiple items. See example.

Also see specifying the ids you provide in the example (parent div id + own value):

$(function() {
        var parentId = $(this).closest(".section").attr("id");
        $(this).attr("id", parentId + $(this).val());        





All Articles