Флажок не отвечает

Question

Флажок не отвечает

0

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>

user3500105 06 апр. 2014, в 13:10

Источник

1

$('input[type="compare"]') , у вас нет типа ввода для compare . Также присвоение одинаковых имен всем флажкам не очень хорошая идея (этот прием довольно часто используется с группой переключателей).
Teemu 06 апр. 2014, в 10:30
0

Поскольку я хотел, чтобы пользователь поставил галочку максимум на 3, после нажатия кнопки «Сравнить» будет выведено содержимое каждого флажка.
user3500105 06 апр. 2014, в 10:44

Теги:

javascript

html

checkbox

2 ответа

0

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

Вы выбираете type = compare, вы хотите выбрать кнопку отправки, type = submit.

Кроме того, вы должны использовать переключатели, если вы должны выбрать только один вариант.

msfoster 06 апр. 2014, в 09:23

0

да ты прав
user3500105 06 апр. 2014, в 10:58

Ещё вопросы

$('input[type="compare"]') , у вас нет типа ввода для compare . Также присвоение одинаковых имен всем флажкам не очень хорошая идея (этот прием довольно часто используется с группой переключателей).
Поскольку я хотел, чтобы пользователь поставил галочку максимум на 3, после нажатия кнопки «Сравнить» будет выведено содержимое каждого флажка.

Ramselvaraj · Accepted Answer · 2014-04-06T07-53-00.000Z

Используйте этот код:

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

где я могу предупредить пользователя о том, что он / она достигла максимального количества чекбоксов, которые можно установить на 3?
Затем нам нужно написать отдельный jquery для захвата события click флажка и использовать ту же логику проверенной длины, чтобы предупредить пользователя