Radio buttons in materialize CSS

Question

I am using the materialize css library to develop a personal project and as part of the project I have created radio buttons. I have managed to creat the radio buttons in html, however, I cant figure out how I can link them to Jquery/JavaScript. I have researched and tried many solutions but havent been able to make any work.

I have 2 groups of radio button, one called Fruitoption and other Mealoption. I want to find out which one is clicked when ok is pressed and then call the correct function based on the chosen algorithm.

I am think of using switch statements to call the correct function but I can't figure out how to find out which option (1 each from both groups) have been chosen.

This is my HTML code:

<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>

What I have tried:

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

... ...

Here a reference to some of the tutorials/guide I used:

How can I know which radio button is selected via jQuery?

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

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

How to get radio buttons work correctly for materialize css design

You're looking for `name=Mealtoption`, which will match nothing. The radio buttons in question would match `name=group2`, or you could use `$('#Mealoption input[type=radio]')` — Paul Roub, Jul 06 '18 at 19:35
Thanks i am not quite sure how to make this work, what I mean is, how do I for example store the selected radio button in variable created in JavaScript so I can call a function based on the selected radio button. — Jackie, Jul 06 '18 at 19:44

score 0 · Answer 1 · answered Aug 17 '23 at 11:43

You can use this example to check on button click, which radio button was selected:

<input type="radio" name="gender" value="Male">Male
    <input type="radio" name="gender" value="Female">Female
    <input type="radio" name="gender" value="Others">Others
    <br>
    <button type="button" onclick="displayRadioValue()">
        Submit
    </button>
    <br>
    <div id="result"></div>
    <script>
        function displayRadioValue() {
            var ele = document.getElementsByName('gender');
 
            for (i = 0; i < ele.length; i++) {
                if (ele[i].checked)
                    document.getElementById("result").innerHTML
                        = "Gender: " + ele[i].value;
            }
        }
    </script>

Reference: https://www.geeksforgeeks.org/how-to-get-value-of-selected-radio-button-using-javascript/

Radio buttons in materialize CSS

1 Answers1