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

使用类和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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;