CODEWITHSUNDEEP
javascriptjquery
CesarA
CesarA

Reputation: 107

Odd behavior when detecting checkbox change with javascript

I have the following HTML code:

<label class="radio">
    <input type="radio" name="msgTo" value="optiona" checked="checked">
    <i></i>Option A</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionb">
    <i></i>Option B</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionc">
    <i></i>Option C</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optiond">
    <i></i>Option D</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optione">
    <i></i>Option E</label>

and I'm trying to do stuff depending on which option is checked with this code:

$('input[name="msgTo"]:checked').on('change', function() {

    alert('option changed');

    if ($('input[name="msgTo"]:checked').val() == 'optionc') {

        $('#outsideMsgWarning').show();
        $('#destEspecificos').hide();
        $('#locEspecificas').hide();

    } else if ($('input[name="msgTo"]:checked').val() == 'optiond') {

        $('#outsideMsgWarning').show();
        $('#destEspecificos').hide();
        $('#locEspecificas').show();
        $('.my_select_box').trigger('chosen:updated');

    } else if ($('input[name="msgTo"]:checked').val() == 'optione') {

        $('#outsideMsgWarning').show();
        $('#destEspecificos').hide();
        $('#locEspecificas').hide();

    } else if ($('input[name="msgTo"]:checked').val() == 'optionb') {

        $('#outsideMsgWarning').hide();
        $('#destEspecificos').show();
        $('#locEspecificas').hide();
        $('.my_select_box').trigger('chosen:updated');

    } else {

        $('#outsideMsgWarning').hide();
        $('#destEspecificos').hide();
        $('#locEspecificas').hide();
        $('.my_select_box').trigger('chosen:updated');

    }

});

When I select the 2nd, 3rd, 4th or 5th option, nothing happens (should hide/show some options) but when I go back to the first one (which would be the ELSE in javascript), the alert is shown. The alert is just for testing purposes.

I've also tried adding brackets [] to the checkboxes names but got the same result.

Why doesn't javascript detect every change?

Thanks in advance!!!

Upvotes: 0

Views: 50

Answers (3)

Sterling Beason
Sterling Beason

Reputation: 630

You are selecting the checked input.

$('input[name="msgTo"]:checked')

Try this selector instead: 

$('input[name="msgTo"]')

Upvotes: 2

prasanth
prasanth

Reputation: 22500

Change the onchange event like this $('input[name="msgTo"]').on('change', function() .you should remove the :checked

$('input[name="msgTo"]').on('change', function() {
 if($(this).is(':checked')){
  alert('option changed');
}
  if ($('input[name="msgTo"]:checked').val() == 'optionc') {

    $('#outsideMsgWarning').show();
    $('#destEspecificos').hide();
    $('#locEspecificas').hide();

  } else if ($('input[name="msgTo"]:checked').val() == 'optiond') {

    $('#outsideMsgWarning').show();
    $('#destEspecificos').hide();
    $('#locEspecificas').show();
    $('.my_select_box').trigger('chosen:updated');

  } else if ($('input[name="msgTo"]:checked').val() == 'optione') {

    $('#outsideMsgWarning').show();
    $('#destEspecificos').hide();
    $('#locEspecificas').hide();

  } else if ($('input[name="msgTo"]:checked').val() == 'optionb') {

    $('#outsideMsgWarning').hide();
    $('#destEspecificos').show();
    $('#locEspecificas').hide();
    $('.my_select_box').trigger('chosen:updated');

  } else {

    $('#outsideMsgWarning').hide();
    $('#destEspecificos').hide();
    $('#locEspecificas').hide();
    $('.my_select_box').trigger('chosen:updated');

  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio">
    <input type="radio" name="msgTo" value="optiona" checked="checked">
    <i></i>Option A</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionb">
    <i></i>Option B</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionc">
    <i></i>Option C</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optiond">
    <i></i>Option D</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optione">
    <i></i>Option E</label>

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65796

Your initial selector that sets up the event binding is looking only for radio buttons that are checked:

$('input[name="msgTo"]:checked').on('change', function() {

Since the first radio button is pre-checked by default, only that one will be affected.

Change the line to:

$('input[name="msgTo"]').on('change', function() {

So that all radio buttons in the group get bound to the event handler.

Upvotes: 4

Related Questions