jQuery 单选框，获取勾选值[iCheck]

Radio box, get the checked value [iCheck]

提问by Kavvson

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

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

如您所见，选中的已附加到 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.

如果在添加 icheck 插件之前 javascript 代码工作正常， 我想知道如何在 icheck 插件中获得相同的结果。它很简单，在无线电单击时，它将值存储在变量中，然后进一步传递给函数。

Live example : http://jsfiddle.net/9ypwjvt4/

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

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

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

回答by Ionic? Biz?u

Attach a handler to ifChangedevent:

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

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

There are 11 ways to listen for changes:

有11 种方法可以监听变化：

• 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

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

JSFIDDLE

JSFIDDLE

回答by Abiodun Arowolo

Avoid using jquery as much as you can. You can also use code below;

尽量避免使用 jquery。您也可以使用下面的代码；

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

回答by Monzur

Use this

用这个

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

回答by akash deep

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