Question

我正在尝试使用javascript编写一个显示或隐藏html元素（包含在div中）的函数。现在我有3个单选按钮（最终显示/隐藏3个元素，具体取决于所选的单选按钮，但是现在我只是试图隐藏一个元素（月），如果选择年份或星期，并显示它是否选择了月份我的HTML是：

<div id="setting">
      <input type="radio" id="year" name="view" value="year"> year<br>
      <input type="radio" id="month" name="view" value="month"> month<br>
      <input type="radio" id="week" name="view" value="week"> week
    </div>
    <div id="cal">
    (element here I am trying to show/hide)
</div>

我的javascript是：

function defineSetting (){
              var setting = document.getElementById('setting').checked;
              if(setting =='year'){
                  document.getElementById("cal").style.display = "none";

              }else if(setting =='month'){
                  document.getElementById("cal").style.display = "unset";

              }else if(setting =='week'){
                  document.getElementById("cal").style.display = "none";
              }
            }

我对javascript也没有超级经验，我想弄清楚如何调用该函数（如果它有效）。如果它在文档就绪函数中，它将在页面加载时运行，或者我是否需要在某处调用它。

Answer 1

我认为这就是你想要的。您希望向按钮添加事件侦听器，并将检查的输入值传递给隐藏/显示defineSetting()元素的#cal函数。我还在defineSetting()

中简化了您的测试

<div id="setting">
  <input type="radio" id="year" name="view" value="year" class="setting"> year<br>
  <input type="radio" id="month" name="view" value="month" class="setting"> month<br>
  <input type="radio" id="week" name="view" value="week" class="setting"> week
</div>

<div id="cal">
  (element here I am trying to show/hide)
</div>

<style>
  .hidden { display: none; }
</style>

<script>
var inputs = document.getElementsByClassName('setting'),
    setting;

for (var i = 0; i < inputs.length; i++) {
  var el = inputs[i];
  el.addEventListener('change', function() {
    defineSetting(this.value);
  })
}

function defineSetting(setting) {
  if (setting == 'year' || setting == 'week') {
    document.getElementById("cal").classList.add('hidden');
  } else {
    document.getElementById("cal").classList.remove('hidden');
  }
}
</script>

Answer 2

这会帮助你： How to get value of selected radio button?

您正在尝试获取div元素的选中值，但此元素没有。 input元素确实具有该属性，因此您可以从中获取该属性。

用单选按钮隐藏和显示html元素，javascript style = none

2 个答案: