Радиокнопки в материализованном CSS

Я использую библиотеку materialize css для разработки личного проекта, и в рамках проекта я создал переключатели. Мне удалось создать переключатели в html, однако я не могу понять, как связать их с JQuery / JavaScript. Я исследовал и пробовал много решений, но не смог ничего сделать.

У меня есть 2 группы переключателей, одна называется Fruitoption, а другая Mealoption. Я хочу узнать, какой из них нажимается при нажатии кнопки ОК, а затем вызвать правильную функцию на основе выбранного алгоритма.

Я думаю об использовании операторов switch для вызова правильной функции, но я не могу понять, как узнать, какой вариант (по одному из обеих групп) был выбран.

Это мой HTML-код:

<form id = "Menu">
        <fieldset id = "Fruitoption" style = "padding-left: 0px; padding-right: 0px;">
            <legend> Fruits/legend>
            <div id = "container"><input type = "radio" name = "group1" id = "checkg11" class = "filled-in"> <label id = "checkbox" for = "checkg11">Apple</label></div>
            <div id = "container"><input type = "radio" name = "group1" id = "checkg11" class = "filled-in"> <label id = "checkbox" for = "checkEA2">Pineapple</label></div>
        </fieldset>
        <fieldset id = "Mealoption" style = "padding-left: 0px; padding-right: 0px;">
            <legend> Meals </legend>
            <div id = "container"><input type = "radio" name = "group2" id = "checkg21"class = "filled-in"> <label id = "checkbox" for = "checkg21">Burger-chips</label></div>
            <div id = "container"><input type = "radio" name = "group2" id = "checkg22"class = "filled-in"> <label id = "checkbox" for = "checkg21">Fish-chips</label></div>
        </fieldset>
    </form>

Что я пробовал:

1

var myRadio = $("input[name=Mealoption]");
var checkedValue = myRadio.filter(":checked").val();

2

$("input[name='Mealoption']:checked").val()

3

var radios = jQuery("input[type='radio']");
radios.filter(":checked")

... ...

Вот ссылка на некоторые из руководств / руководств, которые я использовал:

Как я могу узнать, какой переключатель выбран с помощью jQuery?

https://forum.jquery.com/topic/how-to-check-to-see-if-a-radio-button-is-selected

https://materializecss.com/radio-buttons.html

Как заставить радиокнопки работать правильно для материализованного дизайна css

Вы ищете name=Mealtoption, который ни к чему не подходит. Рассматриваемые переключатели будут соответствовать name=group2, или вы можете использовать $('#Mealoption input[type=radio]')

Paul Roub 06.07.2018 21:35

Спасибо, я не совсем уверен, как это сделать, я имею в виду, как мне, например, сохранить выбранную радиокнопку в переменной, созданной в JavaScript, чтобы я мог вызвать функцию на основе выбранной радиокнопки.

Jackie 06.07.2018 21:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
705
0

Другие вопросы по теме