subhra subhra - 4 months ago 7
HTML Question

Can not check the radio button dynamically using Javascript/Jquery

I need one help. I need to check the radio button dynamically using Javascript/Jquery. I am explaining my code below.

<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>


Here 3 radio button are available .When user will click on set button one radio button should be checked as per given value. My javascript code is given below.

function setRadioButtonValue(){
var valu="5736daffed8cda709ffc8917";
$('#answer_type0').val(valu).prop('checked', true);
console.log('check',document.getElementById('answer_type0').checked);
}


My updated code are available here

updated plunkr

Here i need to check as per the given value(
i.e-var valu="5736daffed8cda709ffc8917"
) so as per code the
Yes/No
should be checked but in my case the first radio button always checked.Please help me to resolve this issue.similarly i need to also check the multiple set of radio button from each set. My plunkr code is here.

Prs Prs
Answer

In your case when the loop is complete i is always set to 2. If you want to do it with for loop see this answer or you can try this simple approach with adding a class within divs.

var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']

function setRadioButtonValue() {
    var i = 0;
    $('.qclass').each(function() {
        console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
        $(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
        i++;
    })
}

Add a class for the div containing the radios in my case qclass

var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']

function setRadioButtonValue() {
  var i = 0;
  $('.qclass').each(function() {
    
    $(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
    console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
    i++;
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left; margin-right:10px;" class="qclass">
  <input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
  <input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
  <input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">A
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">B
  <input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">C

</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Male
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Female
  <input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Male+Female

</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>

Comments