Question

我正在使用下面的代码，它工作正常。我的问题是我需要点击实际的单选按钮来获取代码才能完成它。

我还想添加一个单击处理程序，以便在用户单击div

时触发该事件

以下是当前代码：

<script>

$(function(){
$("input[type=radio]").change(function() {
$("input[type='radio']", $(this).parent().parent()).each(function() {
$(this).parent()
.toggleClass("class_selected", this.checked)
.toggleClass("class_default", !this.checked);

});
});
});

</script>

更新：这是HTML代码：

<div class="def_app">
<span>Title Here</span>
<input type="radio" name="radio1" />
</div>

Answer 1

使用trigger模拟事件已发生，并调用与该事件相关的相应代码。

$(function(){
$("input[type=radio]").change(function() {
$("input[type='radio']", $(this).parent().parent()).each(function() {
$(this).parent()
.toggleClass("class_selected", this.checked)
.toggleClass("class_default", !this.checked);

});
});

//call trigger on the input
$("#yourdiv").click(function() {    
 $("input[type=radio]").trigger('change');
}

});

Answer 2

您很可能只需使用<label>^{W3C specs}代替<div>来包装单选按钮。这样，当用户单击标签文本时，将触发您当前使用的change事件。

如果我正确理解你的问题，那就是语义方式。

看到你的html

后，

更新

只需使用

<label class="def_app"> <span>Title Here</span> <input type="radio" name="radio1" /> </label>

JQuery将click事件添加到现有代码中

2 个答案: