Question

I wish to be able to click on a div and have it select a radio button. I have it working in webkit…but not FF.

The full example can be found here:

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>

And the jquery I am using is:

    <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

I think you must go with <label>s with for attribute:

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

Note that a <label>‘s for attribute must match the <input>‘s id attribute.