javascriptを有効にすると、チェックボックスがオンになり、一度に1つだけを選択します

私は、chkBox100などのようなidとonClick機能を持つチェックボックスを動的に生成しています。私が何をしたいかjavascriptを有効にすると、チェックボックスがオンになり、一度に1つだけを選択します

は一つだけのチェックボックスを選択し

です。
前のチェックボックスがオンで、もう1つのチェックボックスがオンの場合は、前のチェックボックスをオフにします。
選択したチェックボックスをクリックすると、その選択が解除されます。

私はjqueryや他のライブラリなしで標準のjavascriptで行いたいと思います。

ご協力いただければ幸いです。これまでのところ私のコードです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title> New Document </title> 

    <script type="text/javascript"> 

     function toggle(chkBox) 
     { 
     if (chkBox.checked) 
     { 
      chkBox.checked = false; 
     } 
     else 
     { 
      chkBox.checked = true; 
     } 

     // only select one at a time. 
     } 
    </script> 
    </head> 

    <body> 
    <form id="myForm" name="myForm"> 
     <input type="checkbox" id="chkBox100" onClick="toggle(this);"> 
     <input type="checkbox" id="chkBox121" onClick="toggle(this);"> 
     <input type="checkbox" id="chkBox1180" onClick="toggle(this);"> 
    </form> 
    </body> 
</html>

出典

2011-12-15 Nomad

なぜラジオボタンを使用しないのですか？ – gereeter

私は@gereeterに同意します。別のものを選択解除するための "None"オプションを追加することもできます。 –

また、フォームコントロールには名前属性が必要です。そうでない場合、フォームコントロールは正常に実行されず、フォームの送信時には含まれません。 – RobG

ライブラリーを使用しないと、私はあなたが以下を行うことができたと思います。正しく理解すれば動作するようです。

Fiddle

出典

2011-12-15 03:02:13 mreyeros

ご協力いただきありがとうございます。 – Nomad

実際には「選択肢がない」オプションであるデフォルトのチェックボタンでラジオボタンの使用を検討しましたか？ JavaScriptは必要ありません。

<input type="radio" name="rb" value="zero">Zero 
<br> 
<input type="radio" name="rb" value="one">One 
<br> 
<input type="radio" name="rb" value="two">Two 
<br> 
<input type="radio" name="rb" value="None" checked>None of the above

出典

2011-12-15 02:55:10 RobG

ご協力いただきありがとうございます。 – Nomad

あなたが欠けているコードは、残りの部分を選択解除するコードです。これを行うには、最初にすべてのチェックボックスのリストを取得し、すべてのチェックボックスの選択を解除する必要があります。次に、ユーザーがクリックしたものを選択します。

function toggle(chkBox) { 
    checkboxes = document.getElementById("myForm").childNodes; 
    var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand. 
    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].checked = false; //clear all of them 
    } 
    if (isChecked) { 
     chkBox.checked = true; //if the original one wasn't checked, check it 
    } 
}

これを実行する代わりに、RobGが言ったように、あなたがこの問題を解決する可能性が「のどれを言っていない別のオプションを使用して、自動的にあなたがしたい最初の2つのプロパティを持っている、ラジオボタンを使用しますが、第三ないことです"

出典

2011-12-15 02:57:42 gereeter

チェックボックスをオンにしてチェックを外すと、isCheckedがfalseになり、コードがチェックを再開します（チェックボックスをオフにすることは不可能です）。最後の行はちょうど 'chkBox.checked = isChecked;'でなければなりません。ちなみに、isCheckedがfalseの場合、何もする必要はありません。 – RobG

ありがとうございました。 – gereeter

javascriptを有効にすると、チェックボックスがオンになり、一度に1つだけを選択します

答えて

関連する問題