2016-08-28 4 views
1

私は4つのラジオ入力を持っています。jQueryホットキーは一度だけ動作します

私はホットキーを割り当てました。 (ホットキーは1,2,3であり、4)ここで

は私HTMLコードです:私は、あなたも見ることができます

$(document).keypress(function(e) { 

    if(e.charCode == 49) { 
    console.log("1"); 
    $('input:radio[id=1]').attr('checked',true); 
    } 

    if(e.charCode == 50) { 
    console.log("2"); 
    $('input:radio[id=2]').attr('checked',true); 
    } 

    if(e.charCode == 51) { 
    console.log("3"); 
    $('input:radio[id=3]').attr('checked',true); 
    } 

    if(e.charCode == 52) { 
    console.log("4"); 
    $('input:radio[id=4]').attr('checked',true); 
    }     
}); 

<label> 
<input type="radio" value="2" id="1" name="1">[c2] 
</label> 
<label> 
<input type="radio" value="4" id="2" name="1">[c4] 
</label> 
<label> 
<input type="radio" value="1" id="3" name="1">[c1] 
</label> 
<label> 
<input type="radio" value="3" id="4" name="1">[c3] 
</label> 

javascriptのコードconsole.logイベントを単に監視するようにスクリプトに入れてください。

私にとって奇妙なことに、ラジオボタンごとに1回のみホットキーでレディオボタンを選択できます。

*

私は1を押すと、それが正しいのチェックボックスを選択し、私に正しいコンソールログを提供します。

次に2を押しても同じです。

しかし、もう一度1を押すとコンソールログが表示されますが、ホットキーが機能しません。

はここjsfiddleです: https://jsfiddle.net/f07evno0/

私はホットキーは1つのセッションで複数回動作させることができますどのように

答えて

4

あなたは

$("input:radio[id=2]").prop("checked", true) 

$(document).keypress(function (e) { 
 

 
     if (e.charCode == 49) { 
 
      console.log("1"); 
 
      $('input:radio[id=1]').prop('checked', true); 
 
     } 
 

 
     if (e.charCode == 50) { 
 
      console.log("2"); 
 
      $('input:radio[id=2]').prop('checked', true); 
 
     } 
 

 
     if (e.charCode == 51) { 
 
      console.log("3"); 
 
      $('input:radio[id=3]').prop('checked', true); 
 
     } 
 

 
     if (e.charCode == 52) { 
 
      console.log("4"); 
 
      $('input:radio[id=4]').prop('checked', true); 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="radio" value="2" id="1" name="1">[c2] 
 
</label> 
 
<label> 
 
    <input type="radio" value="4" id="2" name="1">[c4] 
 
</label> 
 
<label> 
 
    <input type="radio" value="1" id="3" name="1">[c1] 
 
</label> 
 
<label> 
 
    <input type="radio" value="3" id="4" name="1">[c3] 
 
</label>

が、私は理由を見つけるいけないhttps://jsfiddle.net/f07evno0/1/

+1

また、これを見て:http://stackoverflow.com/questions/5874652/prop-vs-attr説明があります。 –

+0

あなたはこの回答を展開し、OPのアプローチと比較してその理由を説明する必要があります:) –

1

上でそれを試してみて使用する必要がありますが、このコードが働いた:

$(document).keypress(function(e) { 

    if(e.charCode == 49) { 
    console.log("1"); 
    //$('input:radio[id=1]').attr('checked',true); 
    $('input:radio[id=1]')[0].checked= "checked" 
    } 

    if(e.charCode == 50) { 
    console.log("2"); 
    //$('input:radio[id=2]').attr('checked',true); 
    $('input:radio[id=2]')[0].checked= "checked" 
    } 

    if(e.charCode == 51) { 
    console.log("3"); 
    //$('input:radio[id=3]').attr('checked',true); 
    $('input:radio[id=3]')[0].checked= "checked" 
    } 

    if(e.charCode == 52) { 
    console.log("4"); 
    //$('input:radio[id=4]').attr('checked',true); 
    $('input:radio[id=4]')[0].checked= "checked" 
    }     
}); 
関連する問題