Нажмите клавишу Enter, чтобы проверить или установить флажок

Новичок. Я хочу сделать 2 вещи с этими флажками:

  1. Используйте клавишу TAB для выбора опций, эта часть работает
  2. Когда я TAB просматриваю параметры, я хочу нажать клавишу ENTER, чтобы установить этот флажок, эта часть НЕ работает

Ниже приведен пример кода. Я использую флажки как группу.

У кого-нибудь есть предложения?

<!doctype html>
    <head>
        <title>test Radio buttons checkbox</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('input:checkbox[name=Colors]').keypress(function(event) {
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == 13) {
                        Checkbox_to_RadioButton(this);
                        alert("Enter key was pressed");
                    }   
                    event.stopPropagation();
                });

                $('input:checkbox[name=Colors]').click(function(){
                    Checkbox_to_RadioButton(this);
                });
            });

            function Checkbox_to_RadioButton(box){
                $('input:checkbox[name=' + box.name + ']').each(function(){
                    if (this != box)
                        $(this).attr('checked', false);
                });
            }
        </script>
    </head>

    <body>
        <h1>test Radio buttons checkbox</h1>
        <form name="form1">
            <input type="text" id="dname" name="dname"><br>
            <input type="checkbox" id="Colors" name="Colors" value="Red" />Red<br />
            <input type="checkbox"  id="Colors" name="Colors" value="Blue" />Blue<br />
            <input type="checkbox" id="Colors"  name="Colors" value="Green" />Green<br     />
            <input type="checkbox" id="Colors"  name="Colors" value="Yellow"         />Yellow<br /> 
            <br>
        </form>
    </body>
</html>

forms checkbox jquery enter
person Steve42    schedule 13.09.2012    source источник
comment
Пробел нажать не вариант? Если нет, попробуйте использовать событие keydown вместо keypress.   -  person Ilia Frenkel    schedule 13.09.2012
comment
просто обратите внимание, что флажки можно устанавливать с помощью пробела. stackoverflow.com/a/35423812/1343917   -  person Dmitry Gonchar    schedule 31.05.2017

Ответы (4)


arrow_upward
5
arrow_downward

Попробуйте этот код

<!doctype html>
<html>
  <head>
    <title>test Radio buttons checkbox</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('input:checkbox[name=Colors]').keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == 13) {
                    Checkbox_to_RadioButton(this,"enter");
                }   
                event.stopPropagation();
            });

            $('input:checkbox[name=Colors]').click(function(){
                Checkbox_to_RadioButton(this,"click");
            });
        });

        function Checkbox_to_RadioButton(box,myEvent){
            if(myEvent == "enter")
            {
                var $box = $(box);
                if($box.attr('checked'))
                    $box.attr('checked',false);
                else
                    $box.attr('checked',true);
            }
            $('input:checkbox[name=' + box.name + ']').each(function(){
                if (this != box)
                    $(this).attr('checked', false);
            });
        }
    </script>
</head>

<body>
    <h1>test Radio buttons checkbox</h1>
    <form name="form1">
        <input type="text" id="dname" name="dname"><br>
        <input type="checkbox" id="Colors" name="Colors" value="Red" />Red<br />
        <input type="checkbox"  id="Colors" name="Colors" value="Blue" />Blue<br />
        <input type="checkbox" id="Colors"  name="Colors" value="Green" />Green<br     />
        <input type="checkbox" id="Colors"  name="Colors" value="Yellow"         />Yellow<br /> 
        <br>
    </form>
  </body>
</html>
person yoku2010    schedule 13.09.2012

arrow_upward
14
arrow_downward

Я нашел рекомендуемое решение слишком раздутым. это работает лучше

$('input:checkbox').keypress(function(e){
    if((e.keyCode ? e.keyCode : e.which) == 13){
        $(this).trigger('click');
    }
});
person r3wt    schedule 20.04.2015

arrow_upward
4
arrow_downward

Подход r3wt прекрасно работает, но я заметил в своих формах, что нажатие Enter также отправляет форму или иным образом делает что-то еще нежелательное. Добавление e.preventDefault(); предотвращает действие браузера по умолчанию при нажатии ввода на флажке.

$('input:checkbox').keypress(function(e){
    e.preventDefault();
    if((e.keyCode ? e.keyCode : e.which) == 13){
        $(this).trigger('click');
    }
});
person rogi    schedule 09.03.2019

arrow_upward
-1
arrow_downward

Прежде всего, вам не хватает скобки перед тегом form.

Во-вторых, вы забыли активировать флажок при нажатии клавиши:

if (keycode == 13) {
    $(this).attr('checked', checked); // << this line!
    Checkbox_to_RadioButton(this);
    alert("Enter key was pressed");
}

Рабочий скрипт здесь.

person vzwick    schedule 13.09.2012