选择并更改

Question

<form>
    <input type="radio" name="if" value="mag" onclick="mag">MAG</input>
    <input type="radio" name="if" value="ceg" onclick="ceg">CEG</input>
</form>

<form class="mag1" action="includes/signup.ini.php" methode="POST">
    <input type="text" name="first">1</input>
</form>

<form class="ceg1" action="includes/signup.ini.php" methode="POST">
    <input type="text" name="first">2</input>
</form>

<script>
    function mag() {
        document.getElementByClassName("mag1").style.display="block";
    }
</script>

在css文件中,我将显示设置为无.但是剧本对我来说不起作用,也没有做任何事情

Answer 1

缺少s选择器方法名称.虽然它返回一个元素集合,但是你需要使用索引从集合中获取第一个元素.

function mag() {
  document.getElementsByClassName("mag1")[0].style.display="block";
  //                -^-                 -^^^-
}

或者使用Document#querySelector方法代替.

function mag() {
  document.querySelector(".mag1").style.display="block";
}

虽然您需要在onclick属性值内调用函数.

<form>
  <input type="radio" name="if" value="mag" onclick="mag()">MAG
  <input type="radio" name="if" value="ceg" onclick="ceg()">CEG
</form>

FYI: input tag是一个selfclosing标签,因此</input>无效(只需删除它).

更新1:如果您想切换可见性,那么上面的代码是不够的.

.ceg1,
.mag1 {
  display: none
}

<script>
  function mag(ele) {
    document.querySelector(".mag1").style.display = ele.checked ? "block" : "none";
    document.querySelector(".ceg1").style.display = ele.checked ? "none" : "block";
  }

  function ceg(ele) {
    document.querySelector(".ceg1").style.display = ele.checked ? "block" : "none";
    document.querySelector(".mag1").style.display = ele.checked ? "none" : "block";
  }
</script>
<form>
  <input type="radio" name="if" value="mag" onchange="mag(this)">MAG
  <input type="radio" name="if" value="ceg" onchange="ceg(this)">CEG
</form>

<form class="mag1" action="includes/signup.ini.php" method="POST">
  <input type="text" name="first">1
</form>

<form class="ceg1" action="includes/signup.ini.php" method="POST">
  <input type="text" name="first">2
</form>

更新2:或使用通用函数并根据检查的值更新显示属性,这将是更好的方法.

.ceg1,
.mag1 {
  display: none
}

<script>
  function toggle(ele) {
    document.querySelector(".mag1").style.display = ele.value == 'mag' ? "block" : "none";
    document.querySelector(".ceg1").style.display = ele.value == 'ceg' ? "block" : "none";
  }
</script>
<form>
  <input type="radio" name="if" value="mag" onchange="toggle(this)">MAG
  <input type="radio" name="if" value="ceg" onchange="toggle(this)">CEG
</form>

<form class="mag1" action="includes/signup.ini.php" method="POST">
  <input type="text" name="first">1
</form>

<form class="ceg1" action="includes/signup.ini.php" method="POST">
  <input type="text" name="first">2
</form>