0

摘要：我正在寻找将两个单独的 getElementbyId 和一个提交按钮添加到 If Statment 以使其运行。

HTML 示例：

<form>
  <div>
    <fieldset id="group1">
      <input type="radio" name="type" id="h" value="1111" onclick="func2();" />0 Human</br>
      <input type="radio" name="type" id="r" value="2222" onclick="func2();" />1 Robot</br>
      <input type="radio" name="type" id="a" value="3333" onclick="func2();" />2 Animal</br>
    </fieldset>
  </div>
  <div>
    <fieldset id="group2">
      <input type="radio" name="type" id="c" value="1111" onclick="func2();" />4 Jerry</br>
      <input type="radio" name="type" id="b" value="2222" onclick="func2();" />5 Xr10Zbot</br>
      <input type="radio" name="type" id="z" value="3333" onclick="func2();" />6 Girrafe</br>
    </fieldset>
    <p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" onclick="func()2;" /></p </div>
</form>

JavaScript 示例：

 <script>
    function func2()
            {
                if(document.getElementById("h").checked) 
// I want for the if statment to require you to also have to check c and click submit to run
                {
                    var val = document.getElementById("h").value;
                    alert(val);
                }
                else if(document.getElementById("r").checked)
                {
                    var val = document.getElementById("r").value;
                    alert(val);
                }
                else if(document.getElementById("a").checked)
                {
                    var val = document.getElementById("a").value;
                    alert(val);
                }
            }
        </script>

我需要运行 if 语句：

使它成为您必须单击两个单选按钮并提交以运行警报的地方

if(document.getElementById("h").checked) + (document.getElementById("c").checked) + (document.getElementById("f"))
4

1 回答 1

0

我不完全明白你想做什么。我希望我的解决方案对您有所帮助。

第一期

提交按钮中有错字。

  • ❌NGonclick="func()2;"
  • ✅OKonclick="func2();"

第 2 期

具有相同name属性的单选按钮属于一组。因此，只能打开六个按钮中的一个。其中一个按钮#group1和一个按钮#group2没有同时打开。改变name。

例如，

<fieldset id="group2">
  <input name="type2">
  <input name="type2">
  <input name="type2">
</fieldset>

第 3 期

func2()我认为包括提交按钮在内的所有按钮都很难使用。我建议为它制作另一个功能。

我的解决方案

此 JS 在嵌入代码段中无法正常工作。请在 Visual Studio Code 等实际编辑器上复制、粘贴并运行它。

// Get DOMs
var elementC = document.getElementById('c');
var submitButon = document.getElementById('f');
// Get #group1 radio buttons at once
var group1Buttons = document.querySelectorAll('#group1 [type="radio"]');

// These are needed in If statements
// var elementH = document.getElementById('h');
// var elementR = document.getElementById('r');
// var elementA = document.getElementById('a');

function func2(e) {
  e.stopPropagation();

  // You may use this If statement
  // if (elementH.checked) {
  //   alert(elementH.value);
  // } else if (elementR.checked) {
  //   alert(elementR.value);
  // } else if (elementA.checked) {
  //   alert(elementA.value);
  // }

  // I prefer this one because it's shorter.
  alert(this.value);
}

function func3(e) {
  e.stopPropagation();
  
  if (!elementC.checked) {
    e.preventDefault(); // Stop submitting
    alert(`You need to check ${elementC.getAttribute('data-text')}!!`);
  }
}

// When one of the radio buttons is clicked, executes func2()
group1Buttons.forEach(radio => radio.addEventListener('click', func2, false));

// When the submit button is clicked, executes func3()
submitButon.addEventListener('click', func3, false);
<form>
  <div>
    <!-- Removed onClick="func2()" -->
    <!-- Added required to one of radio buttons -->
    <fieldset id="group1">
      <input type="radio" name="type" id="h" value="1111" required />0 Human</br>
      <input type="radio" name="type" id="r" value="2222" />1 Robot</br>
      <input type="radio" name="type" id="a" value="3333" />2 Animal</br>
    </fieldset>
  </div>
  <div>

    <!-- Removed onClick="func2()" -->
    <!-- Added required to one of radio buttons -->
    <!-- Change name: type => type2 -->
    <!-- Added data-text attribute -->
    <fieldset id="group2">
      <input type="radio" name="type2" data-text="4 Jerry" id="c" value="1111" required />4 Jerry</br>
      <input type="radio" name="type2" id="b" value="2222" />5 Xr10Zbot</br>
      <input type="radio" name="type2" id="z" value="3333" />6 Girrafe</br>
    </fieldset>

    <!-- Removed onClick="func2()" -->
    <p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" /></p>
  </div>
</form>

于 2021-03-03T22:21:20.253 回答