0

チェックボックスにチェックを入れると文字を隠すというコードを作成しています。
選択肢数は変動するため、Javascriptのfor文でonclickの関数を登録しています。

下記のようなコードを作成したのですが、どのチェックボックスをクリックしても、IDがtxt3を指しています。(connecttext()のclonsole.logで確認)
iの変更がすべてのonclickに適用されているみたいです。
修正方法や回避策を教えていただきたいです。

<div id="txt0">りんご</div>
<input type="checkbox" id="0" value="on"><br>
<div id="txt1">みかん</div>
<input type="checkbox" id="1" value="on"><br>
<div id="txt2">その他</div>
<input type="checkbox" id="2" value="on"><br>

<script>
// onclickの関数を登録
function mod_form(){
    for (var i=0; i<3; i++){
        document.getElementById(i).onclick = function(){connecttext("txt"+i, this.checked)};
    }
};
// ページ読み込み時に実行
mod_form();

function connecttext( textid, ischecked ) {
    console.log(textid);
    if( ischecked == true ) {
        // チェックが入っていたら有効化
        document.getElementById(textid).disabled = false;
    }
    else {
        // チェックが入っていなかったら無効化
        document.getElementById(textid).disabled = true;
    }
}
</script>

1 件の回答 1

0

onclickに関数を登録するときにconnecttextへの引数を解決しておけば良いでしょう。

    for (var i=0; i<3; i++){
      const textid = "txt"+i;
      document.getElementById(i).onclick = function(){
        connecttext(textid, this.checked);
      };
    }
1
  • うまく行きました! 2021年6月28日 12:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。