1

我有一个单选按钮列表，这些单选按钮都被分成几组，在这种情况下特别是学校课程。

<label class="control-label" for="optionsCheckboxList">Math</label>
<div class="controls">
    <label class="checkbox">
        <input type='checkbox' name='class[math1]' value='1' id="mathhl">
        High Level
    </label>
    <label class="checkbox">
        <input type='checkbox' name='class[math2]' value='1' id="mathsl">
        Standard Level
    </label>
    <label class="checkbox">
        <input type='checkbox' name='class[math3]' value='1' id="mathst">
        Studies
        </label>
</div>
<hr>
<label class="control-label" for="optionsCheckboxList">Physics</label>
<div class="controls">
    <label class="checkbox">
        <input type="checkbox" name='class[phys1]' value='1' id="physhl">
        High Level
    </label>
</div>

在此示例中，数学有多个选项，分别是高级、标准和研究。我想知道一种方法，这样当一个被选中时，其他的被停用，但只适用于同一个班级。因此，例如，如果有人选择 Math High Level，则其他两个数学课程将被禁用（直到未选中），但物理不受影响。

请注意，我有很多课程，所以我想要一些适用于多组复选框的东西。

4

2 回答 2

1

我建议您阅读 MDN 上的注释：https ://developer.mozilla.org/en-US/docs/HTML/Element/Input

关于type="radio"他们说：

您必须使用 value 属性来定义此项目提交的值。

name 属性值相同的单选按钮在同一个“单选按钮组”中；一次只能选择组中的一个单选按钮。

于 2012-08-05T02:27:41.493 回答
0

如果您为每组单选按钮使用相同的名称和不同的值，您将获得所需的内容。

代码：

<?php
if(isset($_POST["submit"])){
    echo "You selected:<br />\r\n<pre>";
    print_r($_POST);
    echo "</pre>";
}
?>
<form action="" method="POST">
<label class="control-label" for="optionsCheckboxList">Math</label>
<div class="controls">
    <label class="checkbox">
        <input type='radio' name='class[math]' value='hl' id="mathhl">
        High Level
    </label>
    <label class="checkbox">
        <input type='radio' name='class[math]' value='sl' id="mathsl">
        Standard Level
    </label>
    <label class="checkbox">
        <input type='radio' name='class[math]' value='st' id="mathst">
        Studies
        </label>
</div>
<hr>
<label class="control-label" for="optionsCheckboxList">Physics</label>
<div class="controls">
    <label class="checkbox">
        <input type="radio" name='class[phys]' value='hl' id="physhl">
        High Level
    </label>
</div>
<hr>
<input type="submit" name="submit" value="Submit" />
</form>

现场演示 此设置满足您描述的所有条件：

你说So, for example, if someone chooses Math High Level, the other two math classes are disabled (until it is unchecked), but Physics is unaffected.

Please note, I have a ton of classes, so I'd like something that works for many groups of check boxes.

因此，使用单选按钮，class[math]组，一次只能选择一种类型的类。数学和物理选择不会相互影响或任何其他课程。

但是，在单选按钮的情况下，您还应该考虑让用户选择一个选项No Class，因为一旦在一组中选择了任何单选按钮，就不能取消选中它（不像复选框可以取消选中）。所以你可以放一些选项，比如No Class

如果您想使用复选框，请参阅此问题：如何禁用启用基于另一个复选框的复选框？

这个问题和接受的答案使用 jQuery，并且与您有类似的要求（成吨的组），但每个组中只处理两个复选框。

于 2012-08-05T03:11:35.467 回答