单选框，获取勾选值[iCheck]答案

【问题标题】：Radio box, get the checked value [iCheck]单选框，获取勾选值[iCheck]
【发布时间】：2014-10-18 16:03:02
【问题描述】：

基本单选框

<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);
        });

    });

问题和描述

在添加 icheck 插件之前，提供的 javascript 代码可以正常工作， 我想知道如何在 icheck 插件中获得相同的结果。它很简单，在单选按钮上单击它会将值存储在变量中，然后再传递给函数。

现场示例：http://jsfiddle.net/9ypwjvt4/

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

【问题讨论】：

使用插件 api 中的事件

标签： jquery icheck

【解决方案1】：

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

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

有11 ways to listen for changes:

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

JSFIDDLE

【讨论】：

是的，它工作得很好，还有一个问题。我以前也有 $("input[data-custom='Text1']").attr( 'checked', true ); ，一个默认的自动检查器如何添加这个？我不能手动操作，因为我的电台列表是从 php 生成的
@user3793639 太好了，不客气！为此提出一个新问题。我会去找的。span>
很好。可悲的是我可以发布一次 90 分钟：3
@user3793639 哦，我明白了。使用这个电话$('input:first').iCheck('check');。
@user3793639 只需传递正确的 jQuery 选择器并调用该方法。伟大的。 :-)

【解决方案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
});

【讨论】：