Radio buttons with javascript


Topic: Radio buttons with javascript

ozcanarslan 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 pro premium priority answered 6 years ago

Hi, send me please your code on my email m.szymanski@mdbootstrap.com I'll take a look at it.

ozcanarslan pro answered 6 years ago

Well simply using the code below;

$("#asama1").click(function () {
 $("#a1").show();
 $("#a2").hide();
 $("#g1").hide();
 $("#g2").hide();
 $asama = "I"; 
 $asama1 = "Aşama I";
 $title = $asama1;
 document.getElementById("legend_title").innerHTML = $title;
 return false;
});
and

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

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

Michal Szymanski staff pro premium priority 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>
        <br>
        <br>

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

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

        <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>
        </fieldset>
        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 d.adach@mdbootstrap.com to get a 50% discount for MDB4
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

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