javascript - Get properties of dynamically-defined, checked radio button -


there load of similar questions asked still can't figure out.

i have set of radio buttons, dynamically defined (both number of buttons , labels them change).

i need label , number associated checked radio button. how can this?

i made js fiddle showing that, when click on button, checked radio "undefined". here's code:

$(document).ready(function() {    var myarray = ["never", "sometimes", "always"];      (i = 0; < myarray.length; i++) {      addradiobutton("radio", + 1, label = myarray[i]);    }      function addradiobutton(type, number, text) {      var label = document.createelement("label");        var element = document.createelement("input");      //assign different attributes element.      element.setattribute("type", type);      element.setattribute("value", number);      element.setattribute("name", type);      element.setattribute("id", "radio_" + number);        label.appendchild(element);      label.innerhtml += text;        var foo = document.getelementbyid("questionanswerradio");      //append element in page (in span).      foo.appendchild(label);    }      $("#questionanswerradio").click(function(event) {      var currentslideresult = 0;      currentslideresult.answerchosen = $("#questionanswerradio :radio:checked + label").text();      currentslideresult.numberchosen = $("#questionanswerradio :radio:checked + value").text();      alert(currentslideresult.answerchosen)    });    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="questionanswerradio"></div>

  1. use $(this) inside event handler value , label of clicked radio button
  2. assign empty object variable currentslideresult
  3. to label associated radio button use $(this).parent().text()
  4. use change event on radio instead of click
  5. you can pass array element directly function, no need assign variable , pass variable
  6. to create new element , append element can use jquery

demo

$(document).ready(function() {    var myarray = ["never", "sometimes", "always"];      (i = 0; < myarray.length; i++) {      addradiobutton("radio", + 1, myarray[i]);    }      function addradiobutton(type, number, text) {      var input = $('<input />')        .attr({          type: type,          value: number,          name: type,          id: 'radio_' + number        });        $('<label />')        .text(text)        .prepend(input)        .appendto('#questionanswerradio');    }      $("#questionanswerradio").on('change', ':radio', function(event) {      var currentslideresult = {};      currentslideresult.answerchosen = $(this).parent().text();      currentslideresult.numberchosen = $(this).val();      alert(currentslideresult.answerchosen);    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="questionanswerradio"></div>


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -