, выбрав радио, нажав на div

Question

Я хочу, чтобы иметь возможность щелкнуть мышью на div и выбрать переключатель. У меня он работает в webkit ... но не FF.

Полный пример можно найти здесь:

http://acgidev.acgisoftware.com/clicktest2.html#

<div class="aaEcmTemplateThumbWrapper"> 
    <div class="aaEcmTemplateTitle"><input type="radio" tabindex="4" class="aaEcmMsgRadio" value="EC_ORDER_CONFIRMATION" name="p_template_message_id">EC Order Confirmation 
</div> 
    <div class="aaEcmTemplateThumb"><a class="aaIframePopup" href="#"><span class="aaMagGlass"></span></a> 
    </div> 
</div> 
<div class="aaEcmTemplateThumbWrapper"> 
    <div class="aaEcmTemplateTitle"><input type="radio" tabindex="4" class="aaEcmMsgRadio" value="EC_ORDER_CONFIRMATION" name="p_template_message_id">EC Order Confirmation 
</div> 
    <div class="aaEcmTemplateThumb"><a class="aaIframePopup" href="#"><span class="aaMagGlass"></span></a> 
    </div> 
</div> 
<div class="aaEcmTemplateThumbWrapper"> 
<div class="aaEcmTemplateTitle"><input type="radio" tabindex="4" class="aaEcmMsgRadio" value="EC_ORDER_CONFIRMATION" name="p_template_message_id">EC Order Confirmation 
</div> 
    <div class="aaEcmTemplateThumb"><a class="aaIframePopup" href="#"><span class="aaMagGlass"></span></a> 
    </div> 
</div> 

И JQuery я использую:

<script type="text/javascript"> 
    //check on div click 
$("div.aaEcmTemplateThumbWrapper").live("click",function(event) { 
    var target = $(event.target); 
    if (target.is('input:radio')) return; 

    var checkbox = $(this).find("input[type='radio']"); 

    if(checkbox.attr("checked") == ""){ 
     checkbox.attr("checked","true"); 
    } else { 
     checkbox.attr("checked",""); 
    } 
    $("div.aaEcmTemplateThumbWrapper").click(function() { 

     $('input:radio').attr('checked',false); 

    }); 
}); 

</script> 

Answer 1

Я думаю, вы должны пойти с <label> с с for атрибут:

<input type="radio" value="1" id="radio1"><label for="radio1">Radio 1</label> 
<input type="radio" value="2" id="radio2"><label for="radio2">Radio 2</label> 
<input type="radio" value="3" id="radio3"><label for="radio3">Radio 3</label> 

Обратите внимание, что <label> 's for атрибут должен соответствовать <input>' id атрибут s.

Answer 2

Вот рабочий пример.

$('.content').click(function() {  
 
\t $('.tlRadio').prop('checked', false); 
 
    var val = $(this).find('input:radio').prop('checked')?false:true; 
 
    $(this).find('input:radio').prop('checked', val); 
 
\t checkedValue = $(this).find('input:radio').val(); 
 
\t console.log(checkedValue); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="content"> 
 
    Div 1 
 
    <input type="radio" class="tlRadio" id="radio1" value="test" /> 
 
</div> 
 
<div class="content"> 
 
    Div 2 
 
    <input type="radio" class="tlRadio" id="radio2" value="test2" /> 
 
</div> 
 
<div class="content"> 
 
    Div 3 
 
    <input type="radio" class="tlRadio" id="radio3" value="test3" /> 
 
</div> 
 
<div class="content"> 
 
    Div 4 
 
    <input type="radio" class="tlRadio" id="radio4" value="test4" /> 
 
</div>