单选按钮被选中，默认为true

Question

请帮我弄清楚为什么我的单选按钮默认检查仍然为True。

这是我的js文件:

$(document).ready(function () {
var is_display = $("#is_display_value").val();
if (is_display) {
$("#id_is_display_True").prop("checked", true);
$("#id_is_display_False").prop("checked", false);
} else {
$("#id_is_display_True").prop("checked", false);
$("#id_is_display_False").prop("checked", true);
}
});

html:

<div class="status">
<p>Status</p>
<input type="hidden" value="False" id="is_display_value"> <!-- Value of {{is_display}} is based on Database, True or False -->
</div>
<div class="status status-body">
<div class="status-choice">
<input type="radio" class="triple" name="is_display" value="True" id="id_is_display_True">
<label for="hide">Show</label>
</div>
<div class="status-choice">
<input type="radio" class="triple" name="is_display" value="False" id="id_is_display_False">
<label for="hide">Hide</label>
</div>
</div>

我JSFiddle

Answer 1

首先输入值返回一个字符串(大写字符串)

首先获取值字符串

var is_display = $("#is_display_value").val().toLowerCase();

在条件if (is_display)中，它总是返回true因为你检查字符串"True"或"False"是否总是返回true

你可以用一个条件来解决这个问题:

//get value to lower case 
var is_display = $("#is_display_value").val().toLowerCase();

$("#id_is_display_true").attr("checked", is_display == "true");
$("#id_is_display_false").attr("checked", is_display == "false");

参见下面的代码片段:

$(document).ready(function () {
var is_display = $("#is_display_value").val().toLowerCase();


$("#id_is_display_true").attr("checked", is_display == "true");
$("#id_is_display_false").attr("checked", is_display == "false");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="status">
<p>Status</p>
<input type="hidden" value="False" id="is_display_value"> 
</div>
<div class="status status-body">
<div class="status-choice">
<input type="radio" class="triple" name="is_display" id="id_is_display_true" value="true">
<label for="hide">Show</label>
</div>
<div class="status-choice">
<input type="radio" class="triple" name="is_display"  id="id_is_display_false" value="false">
<label for="hide">Hide</label>
</div>
</div>