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属性：

の id属性の for属性は <input>に一致しなければならない "ということ

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

注意。

Answer 2

ここでは動作例を示します。あなたが `` Sを使用していないのはなぜ

$('.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>