Topic: Radio buttons with javascript

Ozcan Arslan pro asked 6 years ago

Hi, when i use radio buttons with javascript, effects not working on rado buttons and even selected one is still remains like unselected. But the js code written for radio button click event is working normally.

Michal Szymanski staff answered 6 years ago

Hi, I wrote some simple example for toggling radio via javascript:
        <button class=&quot;btn btn-primary&quot; id=&quot;toggler&quot;>click me</button>

        <fieldset class=&quot;form-group&quot;>
            <input id=&quot;radio1&quot; type=&quot;radio&quot; name=&quot;group1&quot; value=&quot;test1&quot; checked>
            <label for=&quot;radio1&quot;>Option 1</label>

        <fieldset class=&quot;form-group&quot;>
            <input id=&quot;radio2&quot; type=&quot;radio&quot; name=&quot;group1&quot; value=&quot;test2&quot;>
            <label for=&quot;radio2&quot;>Option 2</label>

        <fieldset class=&quot;form-group&quot;>
            <input id=&quot;radio3&quot; type=&quot;radio&quot; name=&quot;group1&quot; value=&quot;test3&quot;>
            <label for=&quot;radio3&quot;>Option 2</label>
        var $radios = $('input[type="radio"][name="group1"]')
        $('#toggler').click(function () {
            var $checked = $radios.filter(':checked');
            var $next = $radios.eq($radios.index($checked) + 1);
            if (!$next.length) {
                $next = $radios.first();
            $next.prop("checked", true);
Is that what you wanted to achieve? About upgrading to MDB4: 1. Read please a release note to be aware Bootstrap 4 is not compatible with Bootstrap 3 (so MDB4 is not backward compatible with MDB3). 2. If it's ok for you write to Dawid on to get a 50% discount for MDB4

Ozcan Arslan pro answered 6 years ago

By the way I am using MDB pro 3 and I saw MDB4 is ready, what should I do to upgrade?

Ozcan Arslan pro answered 6 years ago

Well simply using the code below;

$("#asama1").click(function () {
 $asama = "I"; 
 $asama1 = "Aşama I";
 $title = $asama1;
 document.getElementById("legend_title").innerHTML = $title;
 return false;

<div class="ui-buttonset" id="asamalar">
 <input type="radio" id="asama1" name="radios" value="I">
 <label for="asama1">Aşama I</label>

 <input type="radio" id="asama2" name="radios" value="II">
 <label for="asama2">Aşama II</label>

 <input type="radio" id="gozetim1" name="radios" value="gI">
 <label for="gozetim1">Gözetim I</label>

 <input type="radio" id="gozetim2" name="radios" value="gII">
 <label for="gozetim2">Gözetim II</label>

Michal Szymanski staff answered 6 years ago

Hi, send me please your code on my email I'll take a look at it.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No