Question

如何组合收音机和复选框输入？我的意思是当你选择单选按钮时它取消选中复选框，当你选择一个复选框时，取消选择无线电输入。

这是我的示例输入表单：

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

看起来像这样

Example render of code.

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

Answer 1

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

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

HTML广播和复选框输入结合在一起

2 个答案: