默认选中的单选按钮保持为真

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>

My 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");

参见下面的 sn-p ：

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