JavaScriptが隠しフィールドを正しく更新しない

Question

ラジオボタンのいずれかがYesとして選択されている場合、下のJavascriptコードはID=adjustChkを持つ隠しフィールドの値を 'y'に更新するはずです。

期待どおりにフィールドを更新しますが、ラジオのいずれかが 'n'に戻された場合、非表示フィールドも 'n'に更新されます。 'y'に遭遇したときにbreakがforループを終了することを期待しましたが、これは私が望むやり方では動作しません。

window.onload = function() { 
 
\t \t var ele = document.getElementsByTagName("input"); 
 
\t \t var hid = document.getElementById("adjustChk"); 
 
\t \t var chkItm = ""; 
 
\t \t for(var i = 0, item; item = ele[i]; i++){ 
 
\t \t \t item.addEventListener("click", function() { 
 
\t \t \t \t chkItm = this.value; 
 
\t \t \t \t for (var i = 0; i < ele.length; i++){ 
 
\t \t \t  \t if(chkItm === 'y'){ 
 
\t \t \t \t \t \t hid.value = 'y'; 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t } else { 
 
      \t \t \t \t hid.value = 'n'; 
 
\t \t \t \t \t } 
 
\t \t \t \t }; 
 
\t \t \t }); 
 
\t \t }; 
 
\t };

<div> 
 
    Yes<input type="radio" name="radio1" value="y" /> 
 
    No<input type="radio" name="radio1" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio2" value="y" /> 
 
    No<input type="radio" name="radio2" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio3" value="y" /> 
 
    No<input type="radio" name="radio3" value="n" checked="checked" /> 
 
</div> 
 

 
<input id="adjustChk" type="hidden" value="n" />

も、それを見て参考になる無地Jasvascript使用して、より良い方法があるので、もし私はまだ、JSのこつを取得しています！

Answer 1

問題は、クリックされたラジオボタンの値を調べていることですが、本当に必要なのは、すべての「はい」ラジオボタンのチェックされた状態を見ることです。

、私はおそらく、ハンドラをフックするArray#forEachを使う（this answerの「アレイ状」の部分に記載sliceトリックを使用して）要素の真の配列を取得したい（しかしforループが細かすぎる）と、クリックを処理するときはArray#someを使用して、チェックされたボタンのいずれかの値が"y"であるかどうかのフラグを取得します。

ここでは例を示します。任意の時点でその値を参照するために簡単だったので、私は隠しフィールドが見えるようになる：

// Get the radio buttons 
 
var ele = document.getElementsByTagName("input"); 
 

 
// Get the hidden field 
 
var hid = document.getElementById("adjustChk"); 
 

 
// Attach a handler to all of our radio buttons 
 
for (var i = 0; i < ele.length; ++i) { 
 
    ele[i].addEventListener("click", radioHandler, false); 
 
} 
 

 
function radioHandler() { 
 
    // Assume no "yes" radio buttons are checked 
 
    hid.value = "n"; 
 
    for (var i = 0; i < ele.length; ++i) { 
 
    // Get the radio button for this loop iteration 
 
    var el = ele[i]; 
 
    // If it's checked and has value "y", update the value and we're done 
 
    if (el.checked && el.value === "y") { 
 
     hid.value = "y"; 
 
     break; 
 
    } 
 
    } 
 
}

<div> 
 
    Yes<input type="radio" name="radio1" value="y" /> 
 
    No<input type="radio" name="radio1" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio2" value="y" /> 
 
    No<input type="radio" name="radio2" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio3" value="y" /> 
 
    No<input type="radio" name="radio3" value="n" checked="checked" /> 
 
</div> 
 

 
<input id="adjustChk" type="text" value="n" />

：

// Get the radio buttons, convert the NodeList into a true array 
 
var ele = Array.prototype.slice.call(document.getElementsByTagName("input")); 
 

 
// Get the hidden field 
 
var hid = document.getElementById("adjustChk"); 
 

 
// Attach a handler to all of our radio buttons 
 
ele.forEach(function(el) { 
 
    el.addEventListener("click", radioHandler, false); 
 
}); 
 

 
function radioHandler() { 
 
    // Set `hid.value` to "y" if any of the checked checkboxes have the value "y", 
 
    // "n" otherwise 
 
    hid.value = ele.some(function(el) { 
 
    return el.checked && el.value === "y"; 
 
    }) ? "y" : "n"; 
 
}

<div> 
 
    Yes<input type="radio" name="radio1" value="y" /> 
 
    No<input type="radio" name="radio1" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio2" value="y" /> 
 
    No<input type="radio" name="radio2" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio3" value="y" /> 
 
    No<input type="radio" name="radio3" value="n" checked="checked" /> 
 
</div> 
 

 
<input id="adjustChk" type="text" value="n" />

しかし、ここでは代わりにforループを使用したバージョンです

---

楽しみのためだけに、ここではES2015（別名 "ES6"）を使用して、その最初の例を以下に示します。

// Get the radio buttons as a true array 
 
let ele = Array.from(document.getElementsByTagName("input")); 
 

 
// Get the hidden field 
 
let hid = document.getElementById("adjustChk"); 
 

 
// Attach a handler to all of our radio buttons 
 
ele.forEach(el => { 
 
    el.addEventListener("click", radioHandler, false); 
 
}); 
 

 
function radioHandler() { 
 
    // Set `hid.value` to "y" if any of the checked checkboxes have the value "y", 
 
    // "n" otherwise 
 
    hid.value = ele.some(el => el.checked && el.value === "y") ? "y" : "n"; 
 
}

<div> 
 
    Yes<input type="radio" name="radio1" value="y" /> 
 
    No<input type="radio" name="radio1" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio2" value="y" /> 
 
    No<input type="radio" name="radio2" value="n" checked="checked" /> 
 
</div> 
 
<div> 
 
    Yes<input type="radio" name="radio3" value="y" /> 
 
    No<input type="radio" name="radio3" value="n" checked="checked" /> 
 
</div> 
 

 
<input id="adjustChk" type="text" value="n" />