jQuery是一个广泛使用的Javascript库,可以在编写Web应用程序时简化HTML文档的操作。在此示例中,我们将介绍如何使用jQuery将一组复选框转换为单选框。
<!DOCTYPE html><html><head><script src="https://ajax.googleapis/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(document).ready(function() {$("input[type='checkbox']").click(function() {if($(this).is(':checked')) {$("input[type='checkbox']").not(this).removeAttr('checked');}});});</script></head><body><input type="checkbox" name="fruit" value="apple">苹果<br><input type="checkbox" name="fruit" value="banana">香蕉<br><input type="checkbox" name="fruit" value="orange">橙子<br></body></html>
上面的代码首先使用jQuery库,然后将代码封装在$(document).ready()中,以确保页面在完全加载后再执行代码。
当用户单击复选框时,所选的复选框将设置为选中状态,而其他所有复选框都将取消选中状态。这是通过使用“$(this)”选中当前单击的复选框,然后使用“not(this)”选择所有其他复选框来完成的,最后使用removeAttr('checked')将复选框的“checked”属性设置为false。