Javascript HTML收音机和复选框输入相结合？_Javascript_Html_Checkbox_Radio Button

Javascript HTML收音机和复选框输入相结合？

javascript html checkbox

Javascript HTML收音机和复选框输入相结合？,javascript,html,checkbox,radio-button,Javascript,Html,Checkbox,Radio Button,如何组合收音机和复选框输入？我的意思是，当你选择单选按钮时，它会取消选中复选框；当你选中复选框时，它会取消选中单选输入以下是我的输入表单示例： <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="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魔术？

您需要一些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);
        }
    }
});

Live demo-

这里的一些代码使用了所有复选框，不需要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 Orlovsky接受OP答案的评论

$'input[name=d[]]'。在'change'上，函数{ 如果$this.attr'type'=='radio'{ 如果$this.prop“checked”{ $'input[name=d[]][type=checkbox]'。prop'checked'，false； } } 否则{ 如果$this.prop“checked”{ $'input[name=d[]][type=radio]'。prop'checked'，false； } } }; 选择1 选择2 选择3

选项4您需要JavaScript。出于可用性的原因，这不是一个好主意。让事情以用户不期望的方式运行违反了最小惊讶原则：@BobBrown但它会像我期望的那样运行，因为在我看来，当你从同一组中选择任何其他内容时，单选按钮会取消选择。这就是我想在这里完成的。它可能会像你期望的那样，但不会像你的读者期望的那样。你没有单选按钮。您有复选框和单选按钮的组合。用户不会期望操作单选按钮会更改任何复选框。建议：使用所有复选框并消除与JavaScript和解释性消息的无效组合。@BobBrown所以你是说我应该更改系统？不使用自定义系统？我可以这样做，但我认为这会很好。这实际上是jQuery，所以OP需要在他的页面中包含jQuery。另外，用你的小提琴，我可以选择选项4，然后返回并选择选项2和3。这不会在我选中复选框时取消选择单选按钮。很抱歉不清楚，谢谢您的快速回复。@akaJag:我更新了我的代码，现在工作正常了-。@MaximOrlovsky工作正常！再次感谢您的快速回复！我不确定是否现在就使用它，因为它可能会让一些用户感到困惑。@Maxim Orlovsky请再次检查您的代码。。。看起来你少了些什么。例如，如果您选择选项2，然后选择选项3，然后取消选择选项2，则选项4会自动选择。好的，是的，我喜欢您的答案，但我更喜欢Maxim的版本，因为如果他们的名字相同，它会起作用。我认为你的选择使你在选择4时不能选择复选框1-3。我希望第四个选项是一个收音机，这样你就不能取消选中它，除非选中复选框1-3IMO。如果你选择选项2，然后选择选项3，然后取消选择选项2，MaximOrlovsky的答案就会被窃听。选项4会自动被选中。然而，爱尔兰共和军的解决方案是对阿卡贾格问题的最好回答。