使用样式按钮时，jQuery返回检查的单选按钮的不正确值 [英] jQuery returning incorrect value of checked radio button when using styled buttons

问题描述

我正在使用jQuery插件 ScrewDefaultButtons 设置我的单选按钮的样式，但似乎有副作用通过jQuery获取时不会返回正确的值.当我单击它们时，我正在运行一个函数，并且试图获取用户选择的单选按钮的值，但是它似乎返回的是先前选择的单选按钮的值，而不是刚刚选择的那个.

I'm using the jQuery plugin ScrewDefaultButtons to style my radio buttons, but it seems it comes with a side effect that it doesn't return the correct value when getting it via jQuery. I am running a function when they are clicked and I am trying to get the value of the radio button the user selected, but it seems to returns the value of the previously selected radio button instead of the one that was just selected.

如果我删除类pretty_rb，它会禁用样式，则它会正常工作.

If I remove the class pretty_rb, which disables the styling then it works fine.

我试图通过以下方式获得价值

I am trying to get the value with:

jQuery('input[name=tax_account_type]:checked').val();

我的HTML:

<input type="radio" name="tax_account_type" id="individual" class="pretty_rb" value="0" onclick="updateRegForm();" checked required>
<input type="radio" name="tax_account_type" id="business" class="pretty_rb" value="1" onclick="updateRegForm();" required>

小提琴: http://jsfiddle.net/94UtB/2/

推荐答案

问题是ScrewDefaultButtons将input元素包装在div中，然后隐藏input元素.
此div具有click事件，该事件检查正确的隐藏input元素.
然而.由于您有一个onClick事件，因此您的事件是在更改之前运行的.
这就是为什么您获得old值的原因.

The problem is that ScrewDefaultButtons wraps the input elements in a div and then hides the input element.
This div has a click event that checks the correct hidden input element.
However. Since you have an onClick event YOUR event is run before the change.
That is why you get the old value.

要解决此问题，请在对screwDefaultButtons的调用后 后添加以下代码:

To solve this add the following code after the call to screwDefaultButtons:

$('.styledRadio').on('click', updateRegForm);

或

$('.pretty_rb').on('click', updateRegForm);

请记住要从HTML中删除onlick属性.

Remember to remove the onlick attribute from the HTML.

这篇关于使用样式按钮时，jQuery返回检查的单选按钮的不正确值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！