CODEWITHSUNDEEP
htmlradio-button
Koy
Koy

Reputation: 5

Radio buttons select on label link click

I have a set of radio buttons with links on the labels. The link just plays an mp3 (using schillimania's soundmanager), thus the user stays on the page, and plays one mp3 file.

<div id="edit-quest-1" class="form-radios"><div class="form-item form-type-radio form-item-question-1">  <input
 type="radio" id="edit-question-1-5" name="question_1" value="5"
 class="form-radio">  <label class="option"
 for="edit-question-1-5">Option without link on label</label>

 </div> <div class="form-item form-type-radio form-item-question-1"> 
 <input type="radio" id="edit-question-1-4" name="question_1" value="4"
 class="form-radio">  <label class="option" for="edit-question-1-4"><a
 class="sm2_link" href="sample2.mp3">Option 2</a>
 </label>

 </div> <div class="form-item form-type-radio form-item-question-1"> 
 <input type="radio" id="edit-question-1-12" name="question_1"
 value="12" class="form-radio">  <label class="option"
 for="edit-question-1-12"><a class="sm2_link"
 href="sample3.mp3">Option 3</label> 
</div>

If I click on the first label without the link the check box of the radio gets selected as it should. However if I click on the second or third options, the ones that have links to mp3 files, then it will play my sound but would not select the radiobutton corresponding to the label.

How can I select the radio button when the user clicks on the label trying to listen to the mp3? To ask the same question in different words. How can I click on the labels Option 2 and Option 3 and play the sound, and that at the same time the corresponding radio button gets selected.

Many thanks

Upvotes: 0

Views: 3347

Answers (1)

gyre
gyre

Reputation: 16779

You can use a little bit of jQuery to .click() the labels every time their inner anchor tag is clicked. Note that the snippet below won't quite work properly because the audio files don't exist on the relative path given in your URLs.

$('.sm2_link').on('click', function () {
  this.parentNode.click()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="edit-quest-1" class="form-radios">
  <div class="form-item form-type-radio form-item-question-1"> <input type="radio" id="edit-question-1-5" name="question_1" value="5" class="form-radio"> <label class="option" for="edit-question-1-5">Option without link on label</label>

  </div>
  <div class="form-item form-type-radio form-item-question-1">
    <input type="radio" id="edit-question-1-4" name="question_1" value="4" class="form-radio"> <label class="option" for="edit-question-1-4"><a
 class="sm2_link" href="sample2.mp3">Option 2</a>
 </label>

  </div>
  <div class="form-item form-type-radio form-item-question-1">
    <input type="radio" id="edit-question-1-12" name="question_1" value="12" class="form-radio"> <label class="option" for="edit-question-1-12"><a class="sm2_link"
 href="sample3.mp3">Option 3</a></label>
  </div>

Upvotes: 1

Related Questions