javascript - RadiobuttonFor 总是在 Javascript 中选择默认值

问题描述

列表中有两个 RadiobuttonFor 项目。一个值为“是”，另一个值为“否”。选择“是”时，页面的一部分将可见，而选择“否”时，该部分不应显示。

我面临的问题是，即使选择“否”，通过 Javascript 的值也是“是”。无论选择何种选项，该值始终为“是”。

我尝试了多种以不同方式获取值的方法，但总是得到相同的结果，并且值被拉为“是”。

是否有一些不同的方式来拉动正确的值？

MVC HTML：

     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div data-toggle="buttons">
                                    <label class="btn btn-radio">
                                        @Html.RadioButtonFor(m => m.Claims, "Yes", new { name = "radClaim" }) Yes
                                    </label>

                                    <label class="btn btn-radio">
                                        @Html.RadioButtonFor(m => m.Claims, "No", new { name = "radClaim" }) No
                                    </label>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                @Html.ValidationMessageFor(m => m.Claims, null, new { id = "clmError" })
                            </div>

Javascript：this.value 和 var selected 始终为“Yes”，即使选择了 No。

     $("input[name='Claims']").on("change", function () {
    var selected = $("input[name='Claims']:checked").val()
 
    if (this.value === "Yes") {
        $("#showClaimsHistory").show();
        if (claimCount > 0) {
            $("#showClaimList").show();
        }

    } else {
        $("#showClaimsHistory").hide();
        $("#showClaimList").hide();
    }
});

CSS：

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}


    .btn {
     display: inline-block;
     margin-bottom: 0;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      border: 1px solid transparent;


white-space: nowrap;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #555555;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
     }

.btn-radio {
/*border-radius: 30px;*/
border: 1px solid #dcdcdc;
cursor: pointer;
display: inline-block;
font-weight: 600;
/* padding: .75em 1em; */
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 110px;
font-size: 16px;
letter-spacing: 2px;
line-height: 40px;
height: 60px;
text-align: center;
text-transform: none;
padding-left: 4.2em !important;
padding-right: 4.2em !important;
margin-right: 1.2em !important;
 }

.btn-radio:hover {
    background: #1e73e9 !important;
    border: 1px solid #1e73e9 !important;
    color: #fff;
}

- - - - - - 编辑 - - - - - - -

从下面添加解决方案后的结果：

javascript运行时传递的值：

标签： javascriptjqueryasp.net-mvc

$("input[name='Claims']").on("change", function () { var selected = $("input[name='Claims']:checked").val() if (selected === 'Yes') { $("#showClaimsHistory").show(); if (claimCount > 0) { $("#showClaimList").show(); } } else { $("#showClaimsHistory").hide(); $("#showClaimList").hide(); } });

javascript - RadiobuttonFor 总是在 Javascript 中选择默认值

问题描述

解决方案

推荐阅读