CODEWITHSUNDEEP
jquery
user1208198
user1208198

Reputation: 3

selecting a radio by clicking a div

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>

Upvotes: 0

Views: 1845

Answers (2)

Techlyse Solutions
Techlyse Solutions

Reputation: 19

Here is a working example. 

$('.content').click(function () {    
	$('.tlRadio').prop('checked', false);
    var val =  $(this).find('input:radio').prop('checked')?false:true;
    $(this).find('input:radio').prop('checked', val);
	checkedValue = $(this).find('input:radio').val();
	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>

Upvotes: 0

Anil D
Anil D

Reputation: 2009

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.

Upvotes: 1

Related Questions