HTML单选按钮和多选框结合使用？

Question

HTML单选按钮和多选框结合使用？

4

如何将单选框和复选框输入组合在一起？我的意思是，当您选择单选按钮时，它会取消选中复选框，而当您选择复选框时，单选输入会被取消选中。

这是我的示例输入表单：

<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>

这将看起来像这样

代码渲染示例

现在如果我选择选项4，我希望选项2和选项3取消选择。如何最好地实现这个功能？有些简单的技巧还是需要一些JavaScript魔法？

- Applejag

2

你需要JavaScript。出于可用性的原因，这并不是一个好主意。让事物以用户不期望的方式行事违反了最小惊奇原则：http://en.wikipedia.org/wiki/Principle_of_least_astonishment - Bob Brown

@BobBrown 但是它会按照我的预期起作用，因为在我看来，当您从同一组中选择其他任何内容时，单选按钮将取消选择。这就是我想要在这里实现的。 - Applejag

它可能会像您预期的那样运作，但它不会像读者预期的那样运作。您没有单选按钮。您有一组复选框和单选按钮的组合。用户不会期望操作单选按钮会改变任何复选框。建议：使用所有复选框，并使用JavaScript和解释性消息消除无效组合。 - Bob Brown

@BobBrown，你的意思是我应该更换系统？而不是使用自定义系统？我可以这样做，但我认为使用自定义系统会更好。 - Applejag

3个回答

2

您需要一些JavaScript（jQuery）：

$('input[name="d[]"]').on('change', function(){
    if ($(this).attr('type') == 'radio' ) {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="checkbox"]').prop('checked', false);
        }else {
            $('input[name="d[]"][type="checkbox"]').prop('checked', true);
        }
    }
    else {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="radio"]').prop('checked', false);
        }else {
            $('input[name="d[]"][type="radio"]').prop('checked', true);
        }
    }
});

在线演示 -- http://jsfiddle.net/u2n8j5r2/1/

- MaximOrlovsky

这实际上是jQuery，所以OP需要在他的页面中包含jQuery。另外，通过你的fiddle，我可以选择选项4，然后返回并选择选项2和3。 - Bob Brown

当我选中复选框时，这不会取消单选按钮的选择。抱歉表述不清，并感谢您的快速回复。 - Applejag

@akaJag：我更新了我的代码，现在它可以正常工作--http://jsfiddle.net/u2n8j5r2/1/. - MaximOrlovsky

@MaximOrlovsky的工作非常出色！再次感谢您的快速响应！但我不确定是否应该使用它，因为这可能会使一些用户感到困惑。 - Applejag

1

@Maxim Orlovsky 请再检查一下你的代码……看起来好像有些东西你漏掉了。例如，如果你选择了选项2，然后选择了选项3，然后取消选择选项2，那么选项4会自动被选中。 - ira

1

这里有一些使用所有复选框的代码，不需要jQuery，并且应该能够满足您的需求。（我编辑了代码以更改错误消息被删除的时间。）

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Checkboxes</title>
<style type="text/css">
</style>
<script type="text/javascript">
//<![CDATA[
function chkBoxes() {
    var msg = document.getElementById("msg");
        cb1 = document.getElementById("cb1"),
        cb2 = document.getElementById("cb2"),
        cb3 = document.getElementById("cb3"),
        cb4 = document.getElementById("cb4");

    if (cb4.checked) {
        if (cb1.checked || cb2.checked || cb3.checked) {
            msg.innerHTML = "Option 4 not allowed with options 1-3";
            cb1.checked = false;
            cb2.checked = false;
            cb3.checked = false;
        } 
    } else {
        msg.innerHTML = "";
    }
}
//]]>
</script>
</head>
<body>
<input type="checkbox" name="d[]" id="cb1" value="1" onchange="chkBoxes();"> option 1<br/>
<input type="checkbox" name="d[]" id="cb2" value="2" onchange="chkBoxes();"> option 2<br/>
<input type="checkbox" name="d[]" id="cb3" value="3" onchange="chkBoxes();"> option 3<br/>
<input type="checkbox" name="d[]" id="cb4" value="4" onchange="chkBoxes();"> option 4<br/>
<p id="msg"></p>
</body>
</html>

- Bob Brown

好的，我喜欢你的答案，但我更喜欢Maxim的版本，因为它可以在它们有相同的“名称”时工作。而且我认为你的方法会导致当选择第4个复选框时无法选择1-3号复选框。我希望第四个选项是一个单选按钮，这样你只能通过选择1-3号复选框来取消选择它。 - Applejag

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ira · Accepted Answer

请检查以下内容（需要JQuery）。还请阅读我在@Maxim Orlovsky的OP接受答案上的评论。

$('input[name="d[]"]').on('change', function(){
    if ($(this).attr('type') == 'radio' ) {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="checkbox"]').prop('checked', false);
        }
    }
    else {
        if ( $(this).prop('checked') ) {
            $('input[name="d[]"][type="radio"]').prop('checked', false);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="d[]"> option 1<br/>
<input type="checkbox" name="d[]"> option 2<br/>
<input type="checkbox" name="d[]"> option 3<br/>
<input type="radio" name="d[]"> option 4<br/>