首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用户只在复选框列表中选中一个复选框

要实现一个复选框列表,使用户只能选择一个复选框,可以使用HTML和JavaScript来实现。以下是一个简单的示例:

HTML代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
 <title>单选复选框示例</title>
</head>
<body>
  <h1>请选择一个选项</h1>
 <input type="checkbox" name="option1" id="option1" onclick="checkOnlyOne(this)">
 <label for="option1">选项1</label><br>
 <input type="checkbox" name="option2" id="option2" onclick="checkOnlyOne(this)">
 <label for="option2">选项2</label><br>
 <input type="checkbox" name="option3" id="option3" onclick="checkOnlyOne(this)">
 <label for="option3">选项3</label><br>
</body>
</html>

JavaScript代码:

代码语言:javascript
复制
function checkOnlyOne(checkbox) {
  var checkboxes = document.getElementsByName('option1') || document.getElementsByName('option2') || document.getElementsByName('option3');
  checkboxes.forEach((item) => {
    if (item !== checkbox) {
      item.checked = false;
    }
  });
}

在这个示例中,我们使用了HTML的<input>标签来创建复选框,并使用<label>标签来为复选框添加描述。我们还为每个复选框添加了onclick事件,当用户点击复选框时,会触发checkOnlyOne函数。

checkOnlyOne函数中,我们首先获取所有名为option1option2option3的复选框,然后遍历这些复选框,将除了被点击的复选框之外的所有复选框都取消选中。这样,用户只能选择一个复选框。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券