如何允许用户从一个块中只选择一个 + 和一个 - 选项？

Question

我正在尝试为我的网站制作一个类似于所附图片的表格。

目标是允许用户从一个块中只检查一减一加。到目前为止，我的 html 和 css 代码都很好，但后来我发现了一些不应该发生的问题，例如一旦选中和取消选中一个复选框，即使选中了同一行中的另一个选项，也可以再次选中它.

我的 html 和 css 代码是：

<!DOCTYPE html>
<html>
<head>
  <title>My HTML page</title>
  <style>
    /* style all checkboxes */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px;
}

/* style unchecked checkboxes */
input[type="checkbox"]:not(:checked) {
  background-color: #fff;
}

/* style checked plus checkboxes */
input[type="checkbox"][value="plus"]:checked {
  background-color: #000000;
}

/* style checked minus checkboxes */
input[type="checkbox"][value="minus"]:checked {
  background-color: #000000;
}

/* disable other plus checkboxes when a plus checkbox is checked */
input[type="checkbox"][value="plus"]:checked ~ input[type="checkbox"][value="plus"]:not(:checked) {
  opacity: 0.5;
  pointer-events: none;
}

/* disable other minus checkboxes when a minus checkbox is checked */
input[type="checkbox"][value="minus"]:checked ~ input[type="checkbox"][value="minus"]:not(:checked) {
  opacity: 0.5;
  pointer-events: none;
}

  </style>
</head>
<body>
  <form>
    <p>Question 1:</p>
    <input type="checkbox" name="q1" value="plus"> Plus
    <input type="checkbox" name="q1" value="minus"> Minus

    <p>Question 2:</p>
    <input type="checkbox" name="q2" value="plus"> Plus
    <input type="checkbox" name="q2" value="minus"> Minus

    <p>Question 3:</p>
    <input type="checkbox" name="q3" value="plus"> Plus
    <input type="checkbox" name="q3" value="minus"> Minus

    <p>Question 4:</p>
    <input type="checkbox" name="q4" value="plus"> Plus
    <input type="checkbox" name="q4" value="minus"> Minus

    <br>
    <br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

我想要实现的是允许用户从块中的行中选择一个加号（+），从块中的行中选择一个减号（-）。

根据图像，用户可以从第 1、3、5 和 7 行中选择一个选项，并从第 2、4、6 和 8 行中选择一个选项。

有人可以建议我如何克服这个问题吗？提前谢谢你！！！

Answer 1

无线电输入就是为了这个目的而存在的。只需将

type

元素的

input

从

checkbox

更改为

radio

就可以了。对于具有相同

name

的多个收音机输入，只能选择一个。如果你想让你的收音机看起来像复选框，你将不得不做一些造型。

Answer 2

您可以简单地使用一些脚本帮助来实现这一点。这里billyonecan的回复就是你想要的

他创建了群组并且不让多个复选框被选中。这是例子

<span>Group 1:</span>
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />

<span>Group 2:</span>
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />

<span>Group 3:</span>
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />

这里的脚本部分你必须包括

$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

编辑：不要忘记在您的页面上包含 jquery。您可以包含来自 CDN（内容分发网络）的 jQuery

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

如何允许用户从一个块中只选择一个 + 和一个 - 选项？

问题描述投票：0回答：2

2个回答

最新问题

如何允许用户从一个块中只选择一个 + 和一个 - 选项？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2