JQuery Change Event with select box, Radio Button and Checkbox

Using jQuery(JavaScript library) we can do a very amazing thing on our web page. There is a couple of time when we need to use jquery checkbox change event, select box change event, radio button change event.

Here we are discussing change event with radio button and checkbox. When the value of element updated than the change event will fire.

 For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection.

Select Box Change Event

// HTML Code

<form>
  <select id="select-options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>

jQuery Code for Select Box on change event

$( "#select-options" ).change(function() {
     var value = $(this).val();
});

Radio Button Change Event

// HTML Code

<form>
<input type="radio" name="RADIOBUTTONNAME" value="1"> First Radio Button 
<input type="radio" name="RADIOBUTTONNAME" value="2"> Second Radio Button
</form>

jQuery Code for Radio Button on change event

$('input[type=radio][name=RADIOBUTTONNAME]').change(function() {
    if (this.value == '1') {
        alert("You have clicked on First Radio Button"); 
    } else if (this.value == '2') { 
        alert("You have clicked on Second Radio Button"); 
    }
});

Checkbox Change Event

// HTML Code

<form>
<input type="checkbox" id="CHECKBOXID">
</form>

jQuery Code for Radio Button on change event

if ($('#CHECKBOXID').is(":checked"))
{
    alert('Element is checked');
}else{
    alert('Element is not checked');
}

Leave a Reply

Your email address will not be published. Required fields are marked *