如何在javascript中设置HTML复选框的值答案

【问题标题】：How to set a value of HMTL checkbox in javascript如何在javascript中设置HTML复选框的值
【发布时间】：2022-01-15 15:17:26
【问题描述】：

这听起来像是 9 年前提出的重复问题，但是.. 我需要为我的复选框设置/分配一个值。简单的东西性别：

<div>
  <label for="gender"><b>Gender:</b></label>
  <input type="radio" name="gender" id="male"   value="Male" required> Male
  <input type="radio" name="gender" id="female" value="Female"> Female
</div>
<!-- #3 -->
<div>
  <label for="category"><b>Category</b></label>
  <input type="text"  name="category" id="category" required>
</div>

我设法取出数据（谢谢大家），所以它存储在本地存储中； json文件是=

data = [ 'Miss', 'Female', 'Oversea'
       , '2001-06-10', 'sasha@gmail.com'
       , '39393939']
name = "Sasha"

现在我需要将文件检索到上述输入表单中，编辑并保存。我需要帮助将 Json 文件中的值分配给 html 输入。我对其他领域没有问题；只有复选框。我求助于做一个 if else 语句；

function onEdit(td)
  {
  //obtain row index
  selectedRow = td.parentElement.parentElement;
  // Obtain name value (key)
  var name = selectedRow.cells[1].innerHTML;
  // goto local storage and get the data
  let data = JSON.parse(localStorage.getItem(name));

  document.getElementById("salutation").value = data[0];
  document.getElementById("name").value       = name;
  // // why why does this does not work
  //document.getElementById("gender").value     = data[1];
  // document.querySelector('input[name="gender"]:checked').value = test;
  var test = data[1];
  if ((test) == "Male" )
    {
    document.getElementById('male').value = True;
    document.getElementById('female').value = False;
    }
  else
    {
    document.getElementById('male').value = False;
    document.getElementById('female').value = True;
    };
  document.getElementById("category").value   = data[2];
  document.getElementById("leaddob").value    = data[3];
  document.getElementById("leademail").value  = data[4];
  document.getElementById("leadtel").value    = data[5];
  }

但复选框确实检查但当我保存数据时它变成空白。

救命！

【问题讨论】：

用checked代替value
谢谢。有效。需要从 True = true (False = false) 改变。

标签： javascript html checkbox

【解决方案1】：

不要使用检查！

const
  myForm = document.querySelector('#my-form')
, data  = { gender : 'Male' }
  ;
// init
myForm.gender.value = data.gender  // set Male checked, set Female unchecked

// get value
myForm.onsubmit = e =>
  {
  e.preventDefault() // disable submit for testing
  
  console.clear()
  console.log( 'myForm.gender =', myForm.gender.value )
  }

<form id="my-form">
  <fieldset>
    <legend>Gender</legend>
    <label> <input type="radio" name="gender" value="Male"  > Male </label>   <!--label tag is around  the imput  -->
    <label> <input type="radio" name="gender" value="Female"> Female</label>   <!--  any click on text part set box cheked -->
  </fieldset>
  <button type="submit"> submit </button>
</form>

输入元素在表单内有自己的机制

【讨论】：