How to fire an event when a radio-button (input) is checked?

Balabeque

I have two type="radio" inputs with the first option being checked by default. What I'd like to achieve is to fire a particular event if the second option (input) is checked. I've tried to do it though basic 'if/else' statement (detecting of a particular input has 'checked' attribute), but it doesn't work...

Here's the HTML part:

<input type="radio" name="radio-group" id="sendnow" value="Send Now" checked>
<label for="sendnow" class="camp_lbl">Send Now</label>
<input type="radio" name="radio-group" id="sendlater" value="Schedule Send">
<label id="zzz" for="sendlater" class="camp_lbl">Schedule Send</label>

And the CSS:

#send_options_radio_selectors input[type="radio"] {
  position: absolute;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
}

#send_options_radio_selectors input[type="radio"] + label {
  position: relative;
  margin-right: 12%;
  font-size: 1.5rem;
  line-height: 23px;
  text-indent: 25px;
  color: #505e6d;
  cursor: pointer;
}

#send_options_radio_selectors input[type="radio"] + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  height: 18px;
  width: 18px;
  background: white;
  border: 1px solid gray;
  box-shadow: inset 0 0 0 2px white;
  -webkit-box-shadow: inset 0 0 0 2px white;
  -moz-box-shadow: inset 0 0 0 2px white;
  -o-box-shadow: inset 0 0 0 2px white;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
}

#send_options_radio_selectors input[type="radio"]:checked + label:before {
  background: #e16846;
}
Mosh Feu

You can "listen" to change event using change event. Then you can check if the specific radio is :checked using .prop('checked) (There are many ways to check this)

$('[name="radio-group"]').on('change', function() {
  alert($('#sendlater').prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="radio-group" id="sendnow" value="Send Now" checked>
<label for="sendnow" class="camp_lbl">Send Now</label>
<input type="radio" name="radio-group" id="sendlater" value="Schedule Send">
<label id="zzz" for="sendlater" class="camp_lbl">Schedule Send</label>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to trigger event when a radio button is checked in jQuery

How to trigger click event when I apply checked to a radio button?

How to hide and Show input in html when a radio button is checked?

Radio button CheckedChanged event only when checked?

How can I do it : When checked radio button change input required?

How to have an onClick event fire for certain radio button children of a <tr>

css - Input radio button to target outter label when checked

How to detect event checked radio input in ajax load form

How to give radio input :checked with other onclick button?

How to change the position of an element to left when a radio button is checked?

How to set radio button to checked when i click on list item

How to check if any of the Radio buttons are checked or not when clicked on submit button

How to slide down div when radio button is checked

How to set the state when radio button is by default checked?

How to make the radio button look like this design when selected/checked?

How do I get values when radio button is checked?

JQuery Radio Button checked and change event

Save value of hidden field and radio input value when a radio button is checked using jQuery

How to define if no radio button is not checked

Javascript: How to get the value from a checked radio button when more than one radio button is present

How to add same border to both input radio button and its label after radio has been checked?

Android - How to enable a button if a radio button is checked?

How to fire JQuery change event when input value changed programmatically?

How to fire "focusout" event when focus lost of input placed in table?

Radio button automatically checked when user checks radio button

Radio button checked by itself when scrolling

Div not showing when radio button checked

Perform certain action when radio button is checked

Set radio button checked when click on textarea