0

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

Jackie
  • 407
  • 1
  • 7
  • 18
  • 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

0 Answers0