2016-07-13 5 views
1

私はフォーラムを検索しましたが、私はこのミニ問題の解決策を見つけることができません。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

ラジオボタングループの1つに対してサンプルHTMLセットアップを共有できますか? – mwilson

+0

@mwilson確かに、私は上記のコードを編集しました。ありがとうございます –

+0

generic/reusableはタイプ1の重複コードを繰り返すことから離れてしまいます –

答えて

2

このようなものは動作するはずです。基本的には、グループが正しく構造化されていれば(コンテナ>入力)、グループに渡す関数を作成してそのグループ内を調べ、すべてチェックされます。以下の関数は、すべてチェックされているかどうかをtrue/falseで返します。

JSFiddle:https://jsfiddle.net/u1b3qryf/15/

function checkRadioButtons(optionsDiv) { 
    var inputs = $(optionsDiv).find('.radioCheckBtn'); 
    for (var j = 0; j < inputs.length; j++) { 
     if ($(inputs[j]).is(':checked')) { 
      return true; 
     } 
    } 
    return false; 
} 

function runChecks() { 
    var options = $('.options'); 
    var groupStatus = []; 
    for (var i = 0; i < options.length; i++) { 
     var allChecked = checkRadioButtons(options[i]); 
     groupStatus.push({ group: 'group' + i, hasFieldChecked: allChecked }); 
    } 
    return groupStatus; 
} 

基本的には、ちょうどあなたがそれにコンテナを渡すことができるように関数を作成し、すべてのあなたの入力によってその機能ループを持っています。チェックされていないボックスが見つかった場合はfalseを返します。それ以外の場合はtrueを返します。

あなたは、容器の配列を渡すために、これを強化するか、単にあなたのコンテナの配列を作成し、フォームに取る関数の作成について各反復は、1つのオプショングループはどのよう

+0

私は理由はわかりませんがどちらかが間違っています。 –

+1

すべてのラジオボタンを選択できるグループが1つもないことに気付きました。この設定では、各グループが一意であるため、一度に選択できるオプションは1つだけです。複数の選択を可能にするようにhtmlを更新した場合は、htmlを更新してください。私はちょうどあなたの最初のグループのユニークな選択をオフにしてテストを実行し、それは正常に働いた。'name'属性を削除すると、複数のオプションを選択できます。 – mwilson

+1

私の答えにJSFiddleを追加しました。 – mwilson

0

を取得して、その配列をループ可能性がありパラメータとしての入力フィールド名?

var checkFunction = function(form, field){ 
    //fields can be Sleep, Recreation etc 
    var fields = form[field]; 
    //Now, loop over the nodes in the list 
    // and do whatever you want 
} 
var form = document.getElementById('index-form'); 
checkFunction(form, 'Sleep')