キーを押してチェックボックスをオンにする方法は？

Question

私は、ユーザーがテキストボックスに何かを入力するとすぐにチェックボックスをチェックする次のコードを持っています。これは、1つのテキストボックスでうまく動作します。

function activateCheckbox() { 
     if (document.myForm.box1.checked == false) { 
      document.myForm.box1.checked = true; 
     } 
    } 
    <tr> 
     <td><input type="text" id="mySearch1" name="mySearch1" size="40" onkeypress="activateCheckbox()"/></td> 
     <td><input type="checkBox" id="box1" name="box1"/></td> 
    </tr> 

しかしそこに複数のテキストボックスが各1に対してチェックボックスであると私は唯一、対応するチェックボックスをチェックする必要があることとします。上記のコードを以下に示すように関数にパラメータを渡して変更しましたが、 "id"の代わりにチェックボックスの名前を受け入れるので、 "document.myForm.id.checked"が機能しないため、機能しません。より良い選択肢があるかどうか、またはコードを変更して動作させるにはどうすればいいですか？

function activateCheckbox(id) { 
     if (document.myForm.id.checked == false) { 
      document.myForm.id.checked = true; 
     } 
    } 
    <tr> 
     <td><input type="text" id="mySearch1" name="mySearch1" size="40" onkeypress="activateCheckbox('box1')"/></td> 
     <td><input type="checkBox" id="box1" name="box1"/></td> 
    </tr> 
    <tr> 
     <td><input type="text" id="mySearch2" name="mySearch2" size="40" onkeypress="activateCheckbox('box2')"/></td> 
     <td><input type="checkBox" id="box2" name="box2"/></td> 
    </tr> 
    <tr> 
     <td><input type="text" id="mySearch3" name="mySearch3" size="40" onkeypress="activateCheckbox('box3')"/></td> 
     <td><input type="checkBox" id="box3" name="box3"/></td> 
    </tr> 

Answer 1

あなたにはいくつかのオプションがあります。あなたが行うことができます。

function activateCheckbox(id) { 
    var checkbox = document.getElementById(id); 
    if (! checkbox.checked) { 
     checkbox.checked = true; 
    } 
} 

はJavaScript obj.somePropertyにobj["someProperty"]として意味的に同じことを意味するので、最初のアプローチは動作します：

function activateCheckbox(id) { 
    if (document.myForm[id].checked == false) { 
     document.myForm[id].checked = true; 
    } 
} 

...または個人的に、私はこれをもう少し明確だと思います。したがって、アクセスするプロパティの名前を格納する変数がある場合は、いつでもプロパティにアクセスするためにobj[name]を実行できます。

2番目の方法は、DOMのチェックボックスをidで見つけることです。あなたが変数 "id"を呼び出して以来、あなたは各チェックボックスのidをとにかく設定しているので、私にとってはより清潔に思えます。

ifのステートメントは不要です。 checked属性はtrueまたはfalseになります（他のものをそこに格納することでこれを覆すことができますが、それは完全に別個のトピックです）。だから、falseは常にtrueに設定すると論理的に等価である場合は常にtrueに設定すると、あなたのような、単一のラインを使用してハンドラ関数を実装できます。

function activateCheckbox(id) { 
    document.getElementById(id).checked = true; 
} 

Answer 2

.id文字通りid性質をいいます。 ['abc']は.abcを意味し、

function activateCheckbox(id) { 
     if (document.myForm[id].checked == false) { 
      document.myForm[id].checked = true; 
     } 
    } 

['test']が.testを意味します場合は、あなたがそれを動的に設定したい、[]表記を使用しています。したがって、[id]は、idが持つ値にアクセスします。

Answer 3

私はあなたがjQueryの（WWWを使用することをお勧めします。 jquery.com）。

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script> 

を一つのコード行を追加することによって、あなたは書き込みでただ一つのコード行、あなたの問題の問題を解決することができます：

$('#checkboxId').attr('checked','checked'); 

をか、

$('input[type="checkbox"]').attr('checked','checked'); 

またはunckeck

$('input[type="checkbox"]').attr('checked',''); 

を確認することができます

あなたのすべてのチェックボックスdocum