radio button select on label click

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

ID and name of the input don't have to be the same. Leave the name and change the ID of the second radio to something else (and change the second label's "for" attribute to that ID). When you will submit the form to the server you will get the value by the "name" attribute. Server doesn't know anything about IDs.

Answer 2

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>