HTML单选和复选框输入相结合？答案

【问题标题】：HTML radio and checkbox input combined?HTML单选和复选框输入相结合？
【发布时间】：2014-11-30 03:36:33
【问题描述】：

如何结合单选和复选框输入？我的意思是当你选择单选按钮时，它会取消选中复选框，当你选择一个复选框时，单选输入会被取消选择。

这是我的示例输入表单：

<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/>

看起来像这样

现在，如果我要选择 option 4，我希望 option 2 和 option 3 取消选择。我怎样才能最好地做到这一点？有一些简单的技巧还是我必须包含一些 javascript 魔法？

【问题讨论】：

你需要 JavaScript。出于可用性的原因，这不是一个好主意。让事物以用户不期望的方式运行违反了最小惊讶原则：en.wikipedia.org/wiki/Principle_of_least_astonishment
@BobBrown 但它会像我预期的那样起作用，因为在我看来，当您从同一组中选择其他任何东西时，单选按钮会取消选择。这就是我想要在这里完成的。
它可能会像您期望的那样运行，但不会像您的读者期望的那样运行。您没有单选按钮。您有复选框和单选按钮的组合。用户不会期望操作单选按钮会更改任何复选框。建议：使用所有复选框并使用 JavaScript 和解释性消息消除无效组合。
@BobBrown 所以你是说我应该改变系统？并且不使用自定义系统？我可以这样做，但我认为这会很好。

标签： javascript html checkbox radio-button

【解决方案1】：

检查以下内容（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/>

【讨论】：

IMO MaximOrlovsky 的答案有问题（如果您选择选项 2，然后选择选项 3，然后取消选择选项 2，选项 4 会自动选择）。然而 ira 的解决方案是 akaJag 问题的最佳答案。

【解决方案2】：

这是一些使用所有复选框的代码，不需要 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>

【讨论】：

好吧，我喜欢你的回答，但我更喜欢 Maxim 的版本，因为如果他们得到相同的 name，它就可以工作。 And I think yours makes it so you can't select checkbox 1-3 when 4 is selected.我希望第四个选项是一个收音机，所以你不能取消选择它，除非选择复选框 1-3

【解决方案3】：

你需要一些 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/

【讨论】：

这实际上是 jQuery，所以 OP 需要在他的页面中包含 jQuery。另外，用你的小提琴，我可以选择选项 4，然后返回返回并选择选项 2 和 3。
当我选择一个复选框时，这不会取消选择单选按钮。抱歉不清楚，感谢您的快速回复。
@akaJag : 我更新了我的代码，现在可以正常工作了 -- jsfiddle.net/u2n8j5r2/1.
@MaximOrlovsky 效果很好！再次感谢您的快速回复！我不确定我现在是否应该使用它，因为它可能会让一些用户感到困惑。
@Maxim Orlovsky 请再次检查您的代码...看起来您缺少某些东西。例如，如果您选择选项 2，然后选择选项 3，然后取消选择选项 2，则选项 4 会自动选择。