单选框，获取检查值[iCheck] [英] Radio box, get the checked value [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/

解决方案

将处理程序附加到ifChanged事件:

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

有 11种监听更改的方法:

• ifClicked-用户单击了自定义输入或分配的标签
• ifChanged-输入的检查，禁用或不确定状态已更改
• ifChecked-输入的状态已更改为选中状态
• ifUnchecked-检查状态已删除
• ifToggled-输入的检查状态已更改
• ifDisabled-输入的状态已更改为禁用
• ifEnabled-禁用状态已删除
• ifIndeterminate-输入的状态更改为不确定
• ifDeterminate-不确定状态已删除
• ifCreatedinput-只是自定义
• ifDestroyed-定制已删除

JSFIDDLE

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/

解决方案

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

JSFIDDLE

这篇关于单选框，获取检查值[iCheck]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！