CODEWITHSUNDEEP
htmllabelinternet-explorer-10
fatherazrael
fatherazrael

Reputation: 5987

Why radio button is not getting checked by clicking corresponding text is not working in HTML?

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?

Upvotes: 3

Views: 14244

Answers (2)

fatherazrael
fatherazrael

Reputation: 5987

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/

Upvotes: 4

MarcoTironi
MarcoTironi

Reputation: 1

Your code works corretly. Maybe you can change <p> and <label> order to have better html support. However if it doesn't work for you probably is a browser issue, try to update.

Works in IE 10/11, latest Chrome and Safari

Upvotes: 0

Related Questions