Javascript 复选框没有响应_Javascript_Html_Checkbox

Javascript 复选框没有响应

javascript html checkbox

Javascript 复选框没有响应,javascript,html,checkbox,Javascript,Html,Checkbox,1如何选择多个复选框并提交以获取输入。我单击了“比较”，但什么也没有发生 2如何设置允许的复选框数量？例如，每次比较前，我最多只希望有3个复选框 3比较完成后，如何清除下一轮的输出 <!DOC HTML> <html> <TITLE></TITLE> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <

1如何选择多个复选框并提交以获取输入。我单击了“比较”，但什么也没有发生

2如何设置允许的复选框数量？例如，每次比较前，我最多只希望有3个复选框

3比较完成后，如何清除下一轮的输出

<!DOC HTML>
<html>
<TITLE></TITLE>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[type="compare"]').click(function () {
               $('.frame-wrapper').eq( $(this).index() -1 ).fadeIn();
            });

        });

    </script>
    <style type="text/css">
        .frame-wrapper {
            display: none;
            float: left;
            width: 32%;
            margin-top: 20px;
            margin-right: 1%;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <b>Please select an option</b>
    A <input type="checkbox" name="Option" />
    B <input type="checkbox" name="Option" />
    C <input type="checkbox" name="Option" />
    D <input type="checkbox" name="Option" />
    E <input type="checkbox" name="Option" />
    F <input type="checkbox" name="Option" />
    <input type="submit" value="Compare"/>
    <input type="reset" name="clear" value="Clear"/>

    <div style="clear: both;"></div>
    <div id="tblA" class="frame-wrapper">
        You selected A
    </div>
    <div id="tblB" class="frame-wrapper">
        You selected B
    </div>
    <div id="tblC" class="frame-wrapper">
        You selected C
    </div>
    <div id="tblD" class="frame-wrapper">
        You selected D
    </div>
    <div id="tblE" class="frame-wrapper">
        You seleted E
    </div>

    <div id="tblF" class="frame-wrapper">
        You selected F
    </div>

</body>
</html>

$'input[type=compare]'

您正在选择type=compare，您想选择submit按钮，type=submit

此外，如果只选择一个选项，则应使用单选按钮。

使用以下代码：

$('input[type="submit"]').click(function () {
    if($('input[name=Option]:checked').length >2)
    {
         $('.frame-wrapper').fadeOut();
    $('input[name=Option]').each(function() {
        if ($(this).prop("checked"))
        {
            $('.frame-wrapper').eq( $(this).index() -1 ).fadeIn();
        }                            
    });  
    }
    else
      {
         alert("check count");
      }
});

$'input[type=compare]'，您没有任何比较的输入类型。同时，给所有复选框起一个相同的名字也不是一个好主意。这个技巧更适合于一组单选按钮。因为我的意图是让用户最多勾选3个复选框，单击“比较”后，它将显示每个复选框中的内容，我可以在哪里提醒用户他/她已达到可选中的最大复选框数（即3个）？然后我们需要编写单独的jquery来捕获复选框的单击事件，并使用相同的选中长度逻辑来提醒用户