Issue
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;
}
Solution
You can "listen" to the 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>
Answered By - Mosh Feu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.