Проверьте переключатель при нажатии кнопки DIV

Question

Я пишу приложение для викторины, используя 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 эти ответы появляются в контейнере с одним ответом на строку. Каждый ответ имеет свою собственную коробку внутри контейнера. Я хочу, чтобы пользователь мог щелкнуть в любом месте внутри отдельного элемента ответа и сделать проверку выбора радио.

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

Answer 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>

Answer 2

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

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

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

Answer 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');
});

Теперь с помощью «активного» класса вы можете даже скрыть радио и использовать таблицу стилей для выделения.

Answer 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");
  }

});