Радио-ящик, получите проверочное значение [iCheck]

Базовая радиокамера

<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

<!-- 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> -->

Как вы видите, флажок прикреплен к 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);
        });

    });

Вопрос и описание

Если javascript правильно работал, прежде чем добавлять плагин icheck, Мне интересно, как получить тот же результат в плагине icheck. Его простой, по щелчку по радио, он сохраняет значение в переменной, а затем переходит к функциям.

Пример в реальном времени: http://jsfiddle.net/9ypwjvt4/

iCheck: http://fronteed.com/iCheck/

Ответы

Ответ 1

Прикрепите обработчик к событию ifChanged:

$('input').on('ifChecked', function(event){
  alert($(this).val()); // alert value
});

Есть 11 способов прослушивания изменений:

  • ifClicked - пользователь нажал на пользовательский ввод или назначенный ярлык
  • ifChanged - изменено введенное, отключенное или неопределенное состояние.
  • ifChecked - состояние ввода изменяется на отмеченный
  • ifUnchecked - проверено состояние удалено
  • ifToggled - изменено введенное состояние проверки
  • ifDisabled -входящее состояние изменено на отключенное.
  • ifEnabled - отключено состояние.
  • ifIndeterminate - состояние ввода изменено на неопределенное.
  • ifDeterminate - неопределенное состояние удаляется
  • ifCreatedinput - просто настроен
  • ifDestroyed - настройка просто удалена

JSFIDDLE

Ответ 2

Избегайте использования jquery столько, сколько сможете. Вы также можете использовать код ниже;

$('input').on('ifChecked', function(event){
    alert(event.target.value); // alert value
});

Ответ 3

Используйте этот

// Check #x
$( "#x" ).prop( "checked", true );
 
// Uncheck #x
$( "#x" ).prop( "checked", false );

Ответ 4

$('body').on('ifChecked','.icheck', function(){
//considering icheck is the class of your checkbox and it is getting generated dynamically
});