单选按钮 HTML - 实现 CSS答案

【问题标题】：Radio button HTML - materlizeCSS单选按钮 HTML - 实现 CSS
【发布时间】：2018-07-08 11:32:40
【问题描述】：

我无法将使用 materlizeCSS 在 HTML 中创建的单选按钮链接到 JavaScript。我有一个包含 2 组单选按钮的表单，用户可以从每组组中选择一个选项并按下提交按钮。按下此按钮后，我会调用一个函数，该函数应检查哪些单选按钮已被选中，然后调用正确的函数。

下面是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

</head>

<body> 
<div class="container">
<h3>A Demo of Materialize Radio</h3>
  <form action="#">
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" checked />
        <span>Apple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" />
        <span>Pineapple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group2" type="radio" />
        <span>Juice 1</span>
      </label>
    </p>  
     <p>
      <label>
        <input class="with-gap" name="group2" type="radio" />
        <span>Juice 2</span>
      </label>
    </p>  
    <button type="button" onclick="menuSubmitted" >Submit menu</button>
  </form>
</div>

</body>   
</html>

我尝试了几种不同的方法，但无法让它工作，下面是我想让 javascript 工作的粗略代码。

function menuSubmitted(){ // This method is called when submit button is pressed, which then calls the correct function based on radio buttons selected.

    if (option == 'apple') {
  apple();

  } else if (option == 'pineapple') {
  pineapple();

  } else if (option == 'Juice 1') {
  juice1();

  } else if (option == 'Juice 2') {
  juice2();

  }

}


function apple() {
 alert("Apple selected");
}

function pineapple() {
alert("Pineapple selected");
}

function juice1() {
alert("Juice 1 selected");
}

function juice2() {
alert("Juice 2 selected");
}

我对 Web 开发还很陌生，并且花了很多时间研究这个，但没有发现任何有用的东西。我遇到的所有资源都只展示了 HTML 是如何工作的，并没有在 JavaScript 方面提供任何东西。

谁能帮助我，如果我没有正确解释自己，请告诉我，我会尽力解释得更好。

这里是 JSfiddle 的代码：https://jsfiddle.net/pauwnqcf/1/

【问题讨论】：

标签： javascript jquery html radio-button radio-group

【解决方案1】：

为了使其更易于理解和遵循，我尽可能保留了您的原始代码并对其进行了一些扩展。

您使用的option 变量未在任何地方声明，也不是对您的任何input 的引用。

此外，您的 menuSubmitted 函数不会被调用，因为它错过了您的 onclick 处理程序中的结尾括号 ()，并且应该看起来像这样 onclick="menuSubmitted()"

为了让它工作，你可以循环input's，检查哪一个被检查并将其值分配给option变量，注意，我为每个变量添加了value="fruit"属性，以使其更容易得到，而不是必须在span中找到文本

由于像 onclick 这样的内联脚本是不好的做法，我将其替换为 addEventListener 以稍微“升级”您的代码 :)

堆栈sn-p

var button = document.querySelector('button');

button.addEventListener('click', function() {
  menuSubmitted();
})

function menuSubmitted() {

  var option, inputs = document.querySelectorAll('input');

  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      option = inputs[i].value;
    }
  }

  if (option == 'apple') {
    apple();

  } else if (option == 'pineapple') {
    pineapple();

  } else if (option == 'juice1') {
    juice1();

  } else if (option == 'juice2') {
    juice2();

  }

}


function apple() {
  alert("Apple selected");
}

function pineapple() {
  alert("Pineapple selected");
}

function juice1() {
  alert("Juice 1 selected");
}

function juice2() {
  alert("Juice 2 selected");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

<div class="container">
  <h3>A Demo of Materialize Radio</h3>
  <form action="#">
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" value="apple" checked />
        <span>Apple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" value="pineapple" />
        <span>Pineapple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group2" type="radio" value="juice1" />
        <span>Juice 1</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group2" type="radio" value="juice2" />
        <span>Juice 2</span>
      </label>
    </p>
    <button type="button">Submit menu</button>
  </form>
</div>

【讨论】：

感谢您的回答 - 当我在 stackoverflow 上测试它时它似乎工作正常，但当我在我的实际代码中执行它时它不起作用。我正在使用和
标签，我认为这不会有问题，但它似乎不适用于它们。请参阅帖子的更新部分。
@Jackie 您需要将value="apple" 等添加到您的input 中
感谢它现在工作 - 不知道我是如何错过那部分的 :) 再次感谢
再次感谢，我已经在网上搜索了几天 - 不知道为什么像我这样的初学者还没有在互联网上发布这么简单的事情。如果你知道的话，请你也帮忙 - stackoverflow.com/questions/51210205/…
@Jackie 我做了...并发布了答案

【解决方案2】：

首先将type="button"改为type="submit" 然后将提交事件添加到表单元素onsubmit="menuSubmitted" 什么是选项？您应该像这样获得单选按钮的值：

function menuSubmitted(e){
        e.preventDefault();
    var option1 = document.querySelector('input[name="group1"]:checked').value;
    var option2 = document.querySelector('input[name="group2"]:checked').value;
}

【讨论】：

你的代码很糟糕：` if (option == 'apple') { apple(); } else if (option == 'pineapple') { pineapple(); } else if (option == 'Juice 1') { juice1(); } else if (option == 'Juice 2') { juice2(); }` 你不知道如何处理表单事件和获取输入值。耻辱。
很抱歉听到您对我的编码的看法，只是让您知道，并非所有事情都是专家！并且每个人都从头开始-在这种情况下，这是卑鄙的，但是您曾经站在我的立场上:)另外，我没有否决您，因为我没有足够高的声誉-如果这就是您尝试尝试的原因在我这里