iCheck 库:选定单选按钮的值

Posted

技术标签:

【中文标题】iCheck 库:选定单选按钮的值【英文标题】:iCheck library: value of selected radio button 【发布时间】:2013-09-14 06:45:30 【问题描述】:

jsFiddle here.

我是 javascript 的新手,在阅读 iCheck 页面上的文档时遇到了麻烦。我已经按照似乎非常相关的 *** 问题here 的答案进行了操作,但无法获得弹出显示我选择的值的警报。谁能指出我正确的方向?

html

<p>Are you sure you want to have your details removed from our marketing list?</p>
<div id="unsubscribe_radio">
    <ul>
        <li>
            <input type="radio" name="iCheck" value="yes">
            <label>Yes</label>
        </li>
        <li>
            <input type="radio" name="iCheck" value="no">
            <label>No</label>
        </li>
    </ul>
</div>

Javascript

$(document).ready(function () 
  $('input').iCheck(
     radioClass: 'iradio_flat-orange'
  );
  $("input:radio[name=iCheck]").click(function () 
     var value = $(this).val();
     alert("You clicked " + value);
  );
 );

【问题讨论】:

防止基本事件发生在普通 html 元素上的插件是一个糟糕的插件。并且不应该使用 我与一个将这个插件添加到我们的代码中的人开始了一个项目。除了基本网站之外,处理任何事情都是一场噩梦。我们在一个 ASP Core MVC 项目中使用它,它不断地重写我们的一些 DataBound 检查/无线电控件,以防止页面功能按预期工作。 【参考方案1】:

你必须像这样使用 iCheck

$(document).ready(function () 
    $('input[name="iCheck"]').on('ifClicked', function (event) 
        alert("You clicked " + this.value);
    );
    $('input').iCheck(
        radioClass: 'iradio_flat-orange'
    );
);

DEMO

Documentation

【讨论】:

谢谢,我现在看到了“ifClicked”的重要性。 iCheck 插件产生了一个非常简洁的可视化解决方案,但是文档假设我还没有达到一定程度的 JS。 没问题 :) 他们的网站上有很多文档,所以如果您发现 iCheck 的另一个错误,您很可能会在那里找到解决方案 演示似乎不再工作了。在控制台中看到iCheck is not a function 错误。 @Anton 很棒而且很有用【参考方案2】:

使用 jQuery 选择器获取检查值的另一种方法:

$(".checked input[name=name-of-original-input]").val();

但是可以在配置中更改检查值的 AFAIK 默认类。

顺便说一句,如果 iCheck 以非常简单的功能产生此类问题,我认为它不是一个好的选择。

【讨论】:

【参考方案3】:

我发现其他答案很有用。但是,它们依赖于 iCheck 的“ifClicked”。您可能不希望每次选择新单选按钮时都会弹出该值,而是仅在用户点击特定按钮调用警报和相应值时弹出。

例如:

$(document).on('click', '.buttonClass', function(event) 
  return alert($('.radioClass:checked').val());
);

【讨论】:

谢谢,如果你不想依赖 'ifClicked' 非常有用【参考方案4】:

试试这个:- http://jsfiddle.net/adiioo7/yhmu97qh/

JS:-

$(document).ready(function () 
    $('input').iCheck(
        radioClass: 'iradio_flat-orange'
    );

    $('input').on('ifClicked', function (event) 
        var value = $(this).val();
        alert("You clicked " + value);
    );
);

【讨论】:

演示似乎不再工作了。在控制台中看到iCheck is not a function 错误。 @TotZam iCheck cdn url 不起作用。我已经更新了链接jsfiddle.net/adiioo7/yhmu97qh【参考方案5】:

这对我有用...试试看

HTML:&lt;input type="checkbox" id=checkbox" name="checkbox" /&gt;

jQuery:$( "#checkbox" ).prop("checked");

【讨论】:

【参考方案6】:

对于单选按钮和当前版本的 iCheck:

<div class="row">
    <div class="col-lg-1">
        <div class="form-group">
            <label>
                <input type="radio" name="my-radio" class="flat-green my-radio" value="true"> Yes
            </label>
        </div>
    </div>
    <div class="col-lg-1">
        <div class="form-group">
            <label>
                <input type="radio" name="my-radio" class="flat-red my-radio" value="false"> No
            </label>
        </div>
    </div>
</div>

JS:

var isChecked = $("input[name=my-radio]:checked").val();

如果未选择任何选项,则返回 undefined,如果选择,则返回 true 或 false。

【讨论】:

【参考方案7】:

试试这个代码:

$(".radio .checked input[type=radio]").val()

【讨论】:

以上是关于iCheck 库:选定单选按钮的值的主要内容,如果未能解决你的问题,请参考以下文章

动态创建单选按钮并分配选定的值 PHP

如何根据选定的单选按钮值传递单选按钮值?

从 Django 的一页中获取选定单选按钮的值

Yii 使用 Jquery 从单选按钮列表中获取选定的值

javascript获取选定的html单选按钮输入的值[重复]

如何使用js获取选定的单选按钮值