Jquery 更改输入单选按钮状态

Question

我正在尝试在用户激活或停用名称为 con1

的单选按钮时发出警报

但是不起作用，我当前的代码是

html

<div class="form-field-box even" id="con1_field_box">
    <div class="form-display-as-box" id="con1_display_as_box">con1:</div>
    <div class="form-input-box" id="con1_input_box">
        <div class="pretty-radio-buttons">
            <label>
                <div id="uniform-field-con1-true" class="radio">    <span>
                        <input id="field-con1-true" class="radio-uniform" name="con1" value="1" type="radio">
                    </span>

                </div>active</label>
            <label>
                <div id="uniform-field-con1-false" class="radio">   <span class="checked">
                        <input id="field-con1-false" class="radio-uniform" name="con1" value="0" checked="checked" type="radio">
                    </span>

                </div>inactive</label>
        </div>
    </div>
    <div class="clear"></div>
</div>

js

$(".con1").change(function () {
    if ($("#con1").attr("checked")) {
        alert("aactive");
    } else {
        alert("inactive");
    }
});

我错过了什么？

请看current fiddle

Answer 1

您使用 class 和 ID 选择器选择名称 (con1)。使用 .radio-uniform 来引用单选按钮。另外，使用 prop() 而不是 attr():

$(".radio-uniform").change(function () {
    if ($("#field-con1-true").prop("checked")) {
        alert("aactive");
    } else {
        alert("inactive");
    }
});

jsFiddle example

Answer 2

您正在 select 以您 class 的方式输入名称。您需要将 selector 更改为 $("input[name=con1]")（或者您也可以 select class $(".radio-uniform")，无论您选择哪个都取决于您的代码）并且它会工作正常。请参阅 JSFiddle 或此处：

$("input[name=con1]").change(function () {
    if ($("#con1").attr("checked")) {
        alert("aactive");
    } else {
        alert("inactive");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-field-box even" id="con1_field_box">
    <div class="form-display-as-box" id="con1_display_as_box">con1:</div>
    <div class="form-input-box" id="con1_input_box">
        <div class="pretty-radio-buttons">
            <label>
                <div id="uniform-field-con1-true" class="radio"> <span>
      <input id="field-con1-true" class="radio-uniform" name="con1" value="1" type="radio">
     </span>

                </div>active</label>
            <label>
                <div id="uniform-field-con1-false" class="radio"> <span class="checked">
      <input id="field-con1-false" class="radio-uniform" name="con1" value="0" checked="checked" type="radio">
     </span>

                </div>inactive</label>
        </div>
    </div>
    <div class="clear"></div>
</div>

Jquery 更改输入单选按钮状态

Jquery change input radio button state

javascript

jquery

radio-button

html

js