radio button not checking the checked button

Question

Even the second radio is checked its not checking that and keep the last one checked

<div>
  <input type="radio" id="bed_room_1" name="room[bed_room]" value="1" checked="false" />
  <label for="bed_room_1">1</label>
  </input>

  <input type="radio" id="bed_room_2" name="room[bed_room]" value="2" checked="true" />
  <label for="bed_room_2">2</label>
  </input>
  <input type="radio" id="bed_room_3" name="room[bed_room]" value="3" checked="false" />
  <label for="bed_room_3">3</label>
  </input>
  <input type="radio" id="bed_room_4" name="room[bed_room]" value="4" checked="false" />
  <label for="bed_room_4">4+</label>
  </input>
</div>

Codepen link codepen

@abhilash are you trying to check more than one radio button? — NinjaDeveloper, Jan 20 '16 at 13:33
@NinjaDeveloper This snippet is just for one and yes I do have more buttons in my form.. — Abhilash, Jan 20 '16 at 13:35

score 5 · Accepted Answer · edited May 23 '17 at 11:59

5

checked in radio button is not an attribute that accepts true or false. It is a property. so either checked will work or checked = "checked" will work

<input type="radio" id="bed_room_2" name="room[bed_room]" value="2" checked />
<label for="bed_room_2">2</label>

for more Properties and Attributes in HTML

Difference b/w property and attribute

http://lucybain.com/blog/2014/attribute-vs-property/

edited May 23 '17 at 11:59

Community

1
1

answered Jan 20 '16 at 13:32

developerCK

4,418
3
16
35

2

_“so only __checked__ will work”_ – not “only”, `checked="checked"` is also allowed (http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute) – and _necessary_, if one wants to write XML-compatible code, because that does not allow “stand-alone” attributes without a value. – CBroe Jan 20 '16 at 13:36
1

Thanks @CBroe, i have udpated – developerCK Jan 20 '16 at 13:38
Thank you for the links..Its actually dynamically generated so it was easier for me to work with boolean values..Never thought like this..Thank you... – Abhilash Jan 20 '16 at 13:40

score 3 · Answer 2 · answered Jan 20 '16 at 13:33

checked="false" is not valid. You should use checked or checked="checked" to specify the input to check:

<div>
  <input type="radio" id="bed_room_1" name="room[bed_room]" value="1" />
  <label for="bed_room_1">1</label>
  </input>
  <input type="radio" id="bed_room_2" name="room[bed_room]" value="2" checked />
  <label for="bed_room_2">2</label>
  </input>
  <input type="radio" id="bed_room_3" name="room[bed_room]" value="3" />
  <label for="bed_room_3">3</label>
  </input>
  <input type="radio" id="bed_room_4" name="room[bed_room]" value="4" />
  <label for="bed_room_4">4+</label>
  </input>
</div>

radio button not checking the checked button

2 Answers2