Проверьте радио кнопку при нажатии DIV

Я пишу приложение для викторины, используя php/jquery. Выбор ответа содержится следующим образом:

<ul id="answers"> 
    <li> 
        <div> 
        <input type='radio' name='answer_id' value='313'> True
        </div> 
    </li> 
    <li> 
        <div> 
        <input type='radio' name='answer_id' value='314'> False
        </div> 
    </li> 
</ul>

После создания w/css эти ответы появляются в контейнере с одним ответом на строку. Каждый ответ имеет свою собственную коробку внутри контейнера. Я хочу, чтобы пользователь мог щелкнуть в любом месте отдельного ответного div и установить флажок выбора радио.

Как активировать проверку переключателя, когда пользователь щелкает в контейнере div с помощью jquery?

Ответы

Ответ 1

Вместо использования jQuery это можно сделать в собственном HTML, используя элемент <label>. Вот пример в действии.

<ul id="answers"> 
        <li> 
                <label> 
                    <input type='radio' name='answer_id' value='313'> True
                </label> 
        </li> 
        <li> 
                <label> 
                    <input type='radio' name='answer_id' value='314'> False
                </label> 
        </li> 
</ul>

Ответ 2

Правильное использование тега метки:

<input type="checkbox" id="checkme" name="checkme" /> <label for="checkme">Toggle this checkbox on/off</label>

for = "..." всегда ссылается на входной идентификатор.

Ответ 3

Я согласен с tj111, но если это не всегда соответствует:

  • Более сложный стиль.
  • метки работают только в том случае, если в них есть текст (спасибо Майкл)

Вот альтернативный код, использующий div и jQuery:

$('input:radio').click(ev){
    ev.stopPropagation();
}).parent().click(function(ev){
    ev.preventDefault();
    $(this).children('input').click();
    $(this).addClass('active').siblings().removeClass('active');
});

С "активным" классом теперь вы можете даже скрыть радиоприемники и использовать таблицу стилей для выделения.

Ответ 4

может быть что-то вроде:

$('#answers li div').click(function(){

  var r = $(this).find('input[type=radio]');
  if($(r).is(":checked"))
  {
    $(r).attr("checked", "");
  }
  else
  {
    $(r).attr("checked", "checked");
  }

});