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>

仅供参考： input代码是一个自我关联代码，因此</input>无效（只需将其删除）。

更新1：如果您想切换可见性，那么上述代码是不够的。

＆＃13;

.ceg1,
.mag1 {
  display: none
}

＆＃13;

<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>

＆＃13;

<小时/> 更新2：或使用常用功能并根据检查的值更新显示属性，这是更好的方法。

＆＃13;

.ceg1,
.mag1 {
  display: none
}

＆＃13;

<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>

＆＃13;

选择并更改

1 个答案: