Question

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>

Answer 1

$('input[type="compare"]').

您正在选择type = compare，您要选择提交按钮，输入= submit。

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

Answer 2

使用此代码：

$('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");
      }
});

复选框没有响应

2 个答案: