javascriptで選択肢のクリックを外した時の挙動

Question

複数の選択肢がある際に、あるボタンを選択した際に、特定のフィールドが入力可能にし、選択を外すと、入力不可となるようなプログラムを書いています。

選択した時の挙動は上手くいくのですが、「選択を外した時」というのをコードでどのように書いたら良いか分からないので、ご教授いただけますでしょうか。

自分のやったこと。

                <script>
                    //初期設定
                    // 固定か変動による固定額の見え隠れ
#初期状態でhiddenにしてお
document.getElementById("id_fix_bet").style.visibility = "hidden";

document.getElementById("id_fix_or_variable_1").onclick = function(){
document.getElementById("id_fix_bet").style.visibility = "visible";}
                </script>

その後、選択肢を外してもvisibleのままです。これを解除する方法がわかりません。

Comments

[x_x]

ボタンというのはラジオボタンですか？

[MitMc]

はい。ラジオボタンです。

Answer 1

単純にボタン押下の度にvisibilityをトグルするだけでよいなら、記載いただいたonclickのfunction内で条件分岐すればよいのかと。

    document.getElementById('id_fix_or_variable_1').onclick = function() {
      if (document.getElementById('id_fix_bet').style.visibility === 'hidden') {
        document.getElementById('id_fix_bet').style.visibility = 'visible';
      } else {
        document.getElementById('id_fix_bet').style.visibility = 'hidden';
      }
    }

ただ、visibilityだと表示／非表示が切り替わるので、入力可／不可を切り替えるのであれば、disabledの方がよいのでは？

Comments

[MitMc]

同じボタンを、クリックすると確かに上記のコード良いのですが、他の選択肢を選んで外すことで、id_fix_betをまた見えなくするというやり方を達成するにはどうしたら良いでしょうか？
他の選択肢が１つや２つであれば良いのですが、多くある場合に、「onclickではない状態の場合」というようにonlick自体を条件分岐したいのですが、方法がわかりません。

Answer 2

チェックボックスで切り替えることになるのでしょうけどhtmlがないので
具体的に何がしたいかわかりません
たぶん今のままでは的外れだとは思いますが、これに近いことだと思います

<style>
[data-targetclass=hoge]{display:none;}
[data-targetclass=hoge] + span{display:inline-block;border:3px outset;background-Color:#e0e0e0;padding:0px 3px;}
[data-targetclass=hoge]:checked + span{border:3px inset;padding:0px 2px 0px 4px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[data-targetclass]'),function(x){
    x.addEventListener('change',function(e){
      [].forEach.call(document.querySelectorAll('.'+x.dataset["targetclass"]),function(y){
        y.disabled=e.target.checked;
      });
    });
  });
});
</script>
<label><input type="checkbox" data-targetclass="hoge"><span>hoge</span></label>
<form>
<input type="text" class="hoge"><br>
<input type="checkbox" class="hoge"><br>
<input type="submit" value="send" class="hoge"><br>
</form>

Comments

[kasa0]

「を選択した際に、特定のフィールドが入力可能」だから
y.disabled=!e.target.checked;
かな。

[MitMc]

HTMLを推測していただき、お手数おかけしました。頂いたコードを参考にさせていただきます。
どうもありがとうございます。

Answer 3

  <form action="#">
   <div>
    <label><input type="radio" name="hoge" value="dummy" />違うボタン</label>
    <input type="radio" name="hoge" value="piyo" id="id_fix_or_variable_1" /><label for="id_fix_or_variable_1">あるボタン</label>
    <input id="id_fix_bet" />
   </div>
  </form>

document.getElementById("id_fix_bet").style.visibility = "hidden";
document.forms[0].addEventListener('change', function(event) {
  document.getElementById('id_fix_bet').style.visibility = event.currentTarget.elements['hoge'].value === 'piyo' ? 'visible' : 'hidden';
}, false);

並びによってはCSSのみでできます。

#id_fix_bet {
  visibility: hidden;
}

#id_fix_or_variable_1:checked ~ #id_fix_bet {
  visibility: visible;
}

Comments

[MitMc]

addEventListener('change', function(event))を使うやり方で出来そうです。
vent.currentTarget.elements以降の文法を確認して、適用したいと思います。
ありがとうございます。