When user click NO then corresponding radio button should get checked along with direct click on button. Following is snippet from one of my code:
<span style="display: inline-block;">
<label for="kug.bla0">
<p>
<input id="kug.bla0" type="radio" value="No" name="kug.bla[0]">
No
</p>
</label>
</span>
Is there any way to do it without modifying HTML at all. Please see fiddle:
https://jsfiddle.net/zp9y75sv/
Is there any small JQuery Snippet which get applied to all 50 questions which have similar kind of answer in Yes, No Format?
Update:
The above code is not working in Development environment of client. He is using IE10. Any particular reasons? No errors in JS Console(Firebug).
Update 2: Just to update, if it is related, Pure CSS is being used on out of above span
<div class="pure-u-1 pure-u-md-1-5">.
May be it give any issue?
Update 3: It looks some issue with iframe, in which this exists or some third party?
The above snippet was correct and so it is working correctly. After workaround, i found the error is in code explained below:
For those Radio, for which it was not working was because The value of for in <label> and Value of id in input are different.
As the for attribute specifies which form element a label is bound to. We must bound it to id; not to name or some other value.
Following is snippet demonstrates the same:
<label for="kug.bla[1]">
<p>
<input id="kug.bla4" type="radio" value="JA" name="kug.bla[1]" >LabelForBoundByName</input>
</p>
</label>
<label for="kug.bla1">
<p>
<input id="kug.bla1" type="radio" value="Yes" name="kug.bla[0]">
LabelForBoundById</input>
</p>
</label>
<label for="Independent Label">
<p>
<input id="kug.bla5" type="radio" value="JA" name="kug.bla[5]" >LabelForBoundByNothing</input>
</p>
</label>
Link to jsfiddle: https://jsfiddle.net/zp9y75sv/2/