Question

我有一个html表单。

我希望用户能够标记三个复选框。如果他标记超过三个，我想立即发送警告信息。我该怎么做呢？（之前从未使用过JavaScript）。

Answer 1

编辑：好的，现在你已经把问题改成了一个实际上完全不同的问题。

您需要为每个复选框的onClick事件订阅一个事件处理程序。检查已经点击了多少和用户是否正在尝试检查额外的一个或取消选中当前检查的一个。如果结果是无效状态，您可以发出警报或使隐藏的div可见以警告用户。

原始回答，从问题强制用户仅标记一个复选框时开始。

您不能使用radio button而不是复选框吗？这在UI方面更合适。

（如果您不熟悉HTML中的单选按钮，则可以使用lots of tutorials。）

另一个选项是下拉菜单（使用select元素）。

Answer 2

使用单选按钮 - 这就是它们的用途，只允许检查组中的一个

Answer 3

使用单选按钮而不是复选框？

Answer 4

可用性的默认和最佳方式是使用radiobuttons代替。

何时使用单选按钮

单选按钮是点击时填充黑点的小圆圈。仅当存在两个或更多选项的列表时才应使用单选按钮，并且选择一个选项会否定其他选项。简而言之，当您希望用户从列表中选择单个项目时，请使用单选按钮。将一个选项设置为默认选项，并确保如果选择了另一个单选按钮，则任何先前选择的按钮都会清除。

因为这是单选按钮的标准用法，所以用户会期望这个功能。此外，Jakob Nielsen建议在可用性警报中使用单选按钮而不是下拉菜单，以便用户可以轻松权衡所有选项，而无需执行精确的鼠标移动。

何时使用复选框

复选框可以通过两种不同的方式正确使用：

使用商品列表，访问者可以选择零，一个或多个商品
带有独立的是/否类型问题的单个框复选框是一种很好的方式，可以询问用户在转换或调查读者之前是否已阅读协议，了解他们采取的具体行动，购买的品牌等等。

虽然开始时差异似乎微不足道，但正确使用单选按钮和复选框可以创建更好的用户体验，因为网站的行为方式与他们期望的一样。并且，您可以减少给出的指令量 - 创建更清晰，更快速的转换方式。

取自http://www.wbsonline.com/resources/usability-check-radio-buttons-vs-checkboxes/。

其他选项是使用下拉列表或项目列表，只能选择一项。

Answer 5

简短回答：为每个复选框添加“onchange”事件监听器。检查它们时，运行一个函数来计算检查的数量并做出适当的反应。

以下是jQuery中的一个快速示例（我没有对此进行测试，但它应该可以工作）：

$('input[type="checkbox"]).change(function(evt) {
    if($('input[type="checkbox"]:checked').length > 3) {
        evt.preventDefault();
        alert('Only 3 items can be selected!');
    }
});

修改

快速jQuery教程：http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics

Answer 6

使用jQuery。以下是检查所有单个复选框组的示例：

$(document).ready(function(){
  $(":checkbox").change(function(){
    if ($("[name="+this.name+"]").filter(":checked").length>3) {
      alert("Warning! You've selected more than three options.");
    }
  });
});

这是一个example with your code。

如何强制用户标记三个复选框？

6 个答案:

何时使用单选按钮

何时使用复选框