单选框，获取已选值 [iCheck]

Question

基本单选框

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

正如您所看到的，checked 被附加到 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/

- Kavvson

---

使用插件API中的事件。 - charlietfl

Answer 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

- Ionică Bizău

---

是的，它完美地工作了，还有一个问题。我曾经也使用过 $("input[data-custom='Text1']").attr( 'checked', true ); ，如何添加默认的自动选择器？我无法手动执行此操作，因为我的单选列表是由 PHP 生成的。 - Kavvson

@user3793639 很好，不用谢！请提出一个新的问题。我会去寻找它。 - Ionică Bizău

好的。可惜我每90分钟只能发布一次 :3 - Kavvson

@user3793639 哦，我明白了。使用这个调用 $('input:first').iCheck('check');。 - Ionică Bizău

嗯，对我来说并不简单，我需要的是目标而不是第一个，但输入数据自定义为“Text1”。 - Kavvson

只需传递正确的jQuery选择器并调用方法即可。太好了。 :-) - Ionică Bizău

Answer 2

尽可能避免使用jquery。 您也可以使用以下代码;

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

- Abiodun Arowolo

Answer 3

使用这个

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

- Monzur

Answer 4

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

- akash deep