私はフォーラムを検索しましたが、私はこのミニ問題の解決策を見つけることができません。Javascriptループ&ifステートメントネスト
私はこのフォームを持っていますが、各グループには同じ名前のラジオボタンが10個あります。私がしなければならないことは、10個のグループのそれぞれをループし、それらのすべてがチェックされていない場合に機能を実行することですが、私はこれに対する解決策を見つけることができません。私が今までに成し遂げたことは、私が知っているコード10回を繰り返すことです。これは良い考えではありません。私はそれを行うためのより良い方法があると確信しています。
私がこれまで持っていることである。これは、ラジオボタングループの2のために
var drivingCheck = document.getElementById('index-form').Driving;
for (var i = 0; i < drivingCheck.length; i++) {
if (drivingCheck[i].checked == true) {
break;
} else {
totalCount -= 5;
console.log(totalCount);
break;
}
}
var sleepCheck = document.getElementById('index-form').Sleep;
for (var i = 0; i < sleepCheck.length; i++) {
if (sleepCheck[i].checked == true) {
break;
} else {
totalCount -= 5;
console.log(totalCount);
break;
}
}
ですが、私はこれらの10を持っています。何度も何度も繰り返しなくても、私はこれをどうやって行うことができますか? &現在のコードの問題は、最初の要素以外のラジオボタンがチェックされている場合、コードはグループのすべての要素で ".checked"がfalseの場合にのみ実行される "false"操作を実行します。ここで
var recreationCheck = document.getElementById('index-form').Recreation;
for (var i = 0; i < recreationCheck.length; i++) {
if (recreationCheck[i].checked == true) {
break;
} else if (recreationCheck[0].checked && recreationCheck[2].checked && recreationCheck[3].checked && recreationCheck[4].checked && recreationCheck[5].checked == false) {
totalCount -= 5;
console.log(totalCount);
break;
}
}
は2のためのHTMLです:
EDIT
このアップデートは、今のコードは、すべてのフィールドがチェックされていませんが、それでも私は、コードを何度も繰り返していた場合にのみ操作を実行しますグループ:
<h3>9: Sleep Per Night</h3>
<div class="options">
<input name="Sleep" type="radio" value="0" class="radioCheckBtn">I can sleep with no problem
<input name="Sleep" type="radio" value="1" class="radioCheckBtn">My sleeping is a slight problem (only 1 hour lost sleep)
<input name="Sleep" type="radio" value="2" class="radioCheckBtn">My sleeping is a mildly problem (1 to 2 hours lost sleep
<input name="Sleep" type="radio" value="3" class="radioCheckBtn">My sleeping is a moderate problem (2 to 3 hours lost sleep)
<input name="Sleep" type="radio" value="4" class="radioCheckBtn">My sleeping is a great problem (3 to 5 hours lost sleep)
<input name="Sleep" type="radio" value="5" class="radioCheckBtn">My sleeping is a severe problem (5 to 7 hours lost sleep)
</div>
<h3>10: Recreational Activities</h3>
<div class="options">
<input name="Recreation" type="radio" value="0" class="radioCheckBtn">I can perform all recreation activity without neck pain
<input name="Recreation" type="radio" value="1" class="radioCheckBtn">I can perform recreation activity with only some neck pain
<input name="Recreation" type="radio" value="2" class="radioCheckBtn">I can perform most, not all recreation activity due to neck pain
<input name="Recreation" type="radio" value="3" class="radioCheckBtn">I can only perform some recreation activity due to neck pain
<input name="Recreation" type="radio" value="4" class="radioCheckBtn">I can hardly perform recreational activity due to pain in my neck
<input name="Recreation" type="radio" value="5" class="radioCheckBtn">I cannot perform any recreation activity
</div>
私は意味があると思います。
ありがとうございました
ラジオボタングループの1つに対してサンプルHTMLセットアップを共有できますか? – mwilson
@mwilson確かに、私は上記のコードを編集しました。ありがとうございます –
generic/reusableはタイプ1の重複コードを繰り返すことから離れてしまいます –