jquery选择器单选按钮

jQuery选择器中的单选按钮是一种常用的页面元素,它可以让用户在多个选项中进行单选。下面我们来看看如何使用jQuery选择器实现这种单选按钮。

<code>HTML代码:<div class="radio-box"><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</div>jQuery代码:$(".radio-box input[type=radio]").click(function(){$(this).parent().addClass("active").siblings().removeClass("active");});</code>

上面的HTML代码中,我们定义了一个包含两个单选按钮的div元素。它们的name属性都为gender,分别表示男和女。当用户点击其中一个单选按钮时,该按钮的value值会被提交到后台服务器。

接下来是jQuery代码,我们使用$()函数来选中包含单选按钮的div元素,然后使用click()事件监听器来实现按钮的单击事件。当用户单击某个单选按钮时,执行的回调函数会将该按钮所在的div元素添加一个名为active的CSS类,并将其兄弟元素(即同级别的其他单选按钮所在的div元素)移除active类。

这样,当用户进行单选时,只有选中的单选按钮所在的div元素会被高亮显示。

jquery选择器单选按钮