Радио кнопка HTML - materlizeCSS

У меня возникли проблемы с привязкой моих переключателей, которые я создал в HTML, используя materlizeCSS для JavaScript. У меня есть форма, содержащая 2 группы переключателей, и пользователь может выбрать 1 <! 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> Демонстрация материализованного радио </ 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> Ананас </ span> </ label> </ p> <p> <label> <input class = "with-gap" name = "group2" type = " радио " /> <span> Сок 1 </ span> </ label> </ p> <p> <label> <input class = " with-gap " name = " group2 " type = " radio " /> <span > Сок 2 </ span> </ label> </ p> <button type = "button" onclick = " menuSubmitted " > Отправить меню </ button> </ form> </ div> </ body> </ html> из каждого набора групп и нажмите кнопку отправки. После нажатия этой кнопки я вызываю функцию, которая должна проверять, какие радиокнопки были выбраны, а затем вызвать правильную функцию.

Ниже приведен код HTML:

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");
}

Я пробовал несколько разных способов, но не смог заставить его работать, ниже приведен примерный код того, как я хочу сделать работу javascript.

option

Я довольно новичок в веб-разработке и провел довольно много времени, исследуя это, но ничего не нашел. Все ресурсы, которые я получил, показывают только то, как работает HTML, и не предоставляют ничего на стороне JavaScript.

Может кто-то, пожалуйста, помогите мне, если я не объясню себя должным образом, пожалуйста, дайте мне знать, и я постараюсь изо всех сил объяснить это лучше.

Вот JSfiddle кода: https://jsfiddle.net/pauwnqcf/1/

javascript,jquery,html,radio-button,radio-group,

2

Ответов: 2

<() itemprop = «upvoteCount» класс = «подсчет голосов, после мобильный подсчет голосов»> 1 принял

Чтобы было проще понять и следовать, я сохранил ваш оригинальный код как можно больше и немного расширил его.

Используемая onclickвами переменная не объявлена ??нигде и не является ссылкой на любой из ваших input.

Кроме того, ваша onclick="menuSubmitted()"функция не вызвана, поскольку она пропускает конечную скобку inputв вашем optionобработчике и должна выглядеть так:value="fruit"

Чтобы он работал, вы могли бы зацикливать inputфлажок, проверить, какой из них проверен, и назначить его значение optionпеременной, и обратите внимание, я добавил spanатрибут для каждого, чтобы сделать его легче, чем искать текст внутриspan

Поскольку встроенный скрипт onclick- это плохая практика, я заменил его addEventListenerна «обновить» ваш код немного :)

Фрагмент стека

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>

-1

Прежде всего измените значение type="button«to type="submit" Then ». Затем добавьте событие отправки в элемент формы. 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;
}
JavaScript, JQuery, HTML, радио-кнопки, радио-группа,
Похожие вопросы
Яндекс.Метрика