Radio box, get the checked value [iCheck]
37,613
Solution 1
Attach a handler to ifChanged
event:
$('input').on('ifChecked', function(event){
alert($(this).val()); // alert value
});
There are 11 ways to listen for changes:
-
ifClicked
- user clicked on a customized input or an assigned label -
ifChanged
- input's checked, disabled or indeterminate state is changed -
ifChecked
- input's state is changed to checked -
ifUnchecked
- checked state is removed -
ifToggled
- input's checked state is changed -
ifDisabled
-input's state is changed to disabled -
ifEnabled
- disabled state is removed -
ifIndeterminate
- input's state is changed to indeterminate -
ifDeterminate
- indeterminate state is removed -
ifCreatedinput
- is just customized -
ifDestroyed
- customization is just removed
Solution 2
Avoid using jquery as much as you can. You can also use code below;
$('input').on('ifChecked', function(event){
alert(event.target.value); // alert value
});
Author by
Kavvson
Updated on July 22, 2020Comments
-
Kavvson almost 4 years
Basic radio box
<div class="adv_filter"> <li> <input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li> </li> <li> <input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li> </li> </div>
iCheck transformation
<!-- iCheck output format <div class="adv_filter"> <li> <div class="iradio_square-orange checked" aria-checked="true" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> Text</li> <li> <div class="iradio_square-orange" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> Text</li> </div> -->
As you see the checked is attached to the div..
$(document).ready(function () { $('input').iCheck({ checkboxClass: 'icheckbox_square-orange', radioClass: 'iradio_square-orange', increaseArea: '20%' // optional }); $("li").on("click", "input", function () { var val = $(this).val(); //updateDataGrid(val); alert(val); }); });
Question and description
Provided javascript code worked properly before adding the icheck plugin, I am wondering how to get the same result in the icheck plugin. Its simple, on radio click it stores the value in variable later its passed further to functions.
Live example : http://jsfiddle.net/9ypwjvt4/
iCheck : http://fronteed.com/iCheck/
-
Kavvson over 9 yearsYes it works perfectly, one more question. I used to had also $("input[data-custom='Text1']").attr( 'checked', true ); , A default auto checker how to add this? I can't do it manually cause my radio list is generated from php
-
Ionică Bizău over 9 years@user3793639 Great, you're welcome! Ask a new question for that. I will look for it.
-
Kavvson over 9 yearsFine. Sadly I can post once 90 min :3
-
Ionică Bizău over 9 years@user3793639 Oh, I see. Use this call
$('input:first').iCheck('check');
. -
Kavvson over 9 yearsWell, Its not that simple for me I need target not the first, but the input data-custom="Text1"
-
Ionică Bizău over 9 years@user3793639 Just pass the correct jQuery selector and call the method. Great. :-)