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>的{{1}}属性必须与for的{{1}}属性匹配。

Answer 2

这是一个工作示例。

＆＃13;

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

＆＃13;

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

＆＃13;

通过单击div选择一个收音机

2 个答案: