Steve42 Steve42 - 1 month ago 7
jQuery Question

Hit Enter key to Check or select checkbox

Newbie- I want to do 2 things with these checkboxes:


  1. Use TAB key to tab through options, this part works

  2. As I TAB through options, I want to hit ENTER key to select that check box, this part is NOT working



Below is sample code. I am using the checkboxes as a group.


Does any one have any suggestions?

<!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>

Answer

Try this code

<!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>