单选按钮 HTML - materlizeCSS

Question

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

下面是我的 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");
}

我对网络开发还很陌生，花了很多时间研究这个，但没有发现任何有用的东西。我遇到的所有资源仅显示 HTML 的工作原理，不提供 JavaScript 方面的任何内容。

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

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

Answer 1

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

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

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

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

中找到文本

由于像 onclick 这样的内联脚本是不好的做法，我将它替换为 addEventListener 到 "upgrade" 你的代码一点点:)

堆栈片段

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>

Answer 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;
}

单选按钮 HTML - materlizeCSS

Radio button HTML - materlizeCSS

html

javascript

jquery

radio-group

radio-button