通过点击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> s的去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>小号id属性的for属性必须在<input>匹配“。

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>