Question

How can I make radio buttons to be selected when I click on any of two labels in front of that radio button?

I have following code for radio buttons:

<div class="label_main" style="width:350px">
    <div class="label_radio">
      <input type="radio" name="group1" id="group1" value="0" 
       <?php if($r0==0) { ?>
       checked="checked"
       <?php  } ?>
      />
    </div>
    <div class="label_top">
      <label for="group1">First Option </label>
    </div>
    <div class="label_desc">
      <label for="group1">This is first option </label>
    </div>
  </div>
      </div> 

  <div class="label_main" style="width:350px">
    <div class="label_radio">
      <input type="radio" name="group1" id="group1" value="1"
       <?php if($r0==1) { ?>
       checked="checked"
       <?php  } ?>
      />
    </div>
    <div class="label_top">
      <label for="group1">Second Option </label>
    </div>
    <div class="label_desc">
      <label for="group1">This is Second Option </label>
    </div>
  </div>          

Only problem I am having if I change radio ID it work fine, but I need same id cause I need its value at the end to save in database.

Answer 1

You’re confusing the name attribute with the id attribute.

They should each have the same name, but a different id.

For example:

<input type="radio" name="group1" id="group1_0" value="0">
<input type="radio" name="group1" id="group1_1" value="1">

<label for="group1_0">CLicky 0</label>
<label for="group1_1">CLicky 1</label>