单击时如何更改复选框的“已选中”属性？答案

【问题标题】：How do I change the "checked" attribute of a check box when clicked?单击时如何更改复选框的“已选中”属性？
【发布时间】：2018-12-19 21:30:08
【问题描述】：

我目前正在尝试构建一个带有复选框的列表，这些复选框可以轻松选中/取消选中以包含或排除。当页面加载时，大多数列表项将具有复选框“已选中”属性以显示该项目已包含在内。我试图在用户更改选择时更改复选框属性，以便我可以保存结果。

我尝试了一些我在 Stackoverflow 上找到的组合，但没有一个改变属性，我不确定我做错了什么。

function check() {
  if ($("#working").prop("checked", true)) {
    $("#working").prop("checked", false)
  } else {
    $("#working").prop("checked", true)
  }
}

var data = {
  id: document.getElementById('workingId').value,
  visible: document.getElementById('working').checked
};

$(document).on("click", ".save", function() {
  alert(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="workingId" value="13245">
<input type="checkbox" name="working" id="working" onclick="check(this);" checked> I am a check box

<button type="button" class="btn save"> Save</button>

我希望打印一个数组，该数组具有复选框 (12345) 的 ID，以及该复选框现在是否已选中/未选中。对此的任何帮助将不胜感激。

【问题讨论】：

为什么必须在点击时更改复选框？这就是它已经做的......
您在页面加载时设置data，而不是在用户点击时更新它。
在小提琴中你需要使用“No wrap”设置来使check()成为一个全局函数。见stackoverflow.com/questions/5431351/…
单击复选框会自动更改属性。然后，您的代码将撤消该更改。
if ($("#working").prop("checked", true)) 不是测试属性的正确方法。它将属性设置为true。使用if ($("#working").prop("checked") == true) 或仅使用if ($("#working").prop("checked"))

标签： javascript jquery html

【解决方案1】：

我不知道我是否理解你的问题。这是你想要的吗？

var data = {};

function check() {
  if ($("#working").prop("checked")) {
    data = {
      id: document.getElementById('workingId').value,
      visible: document.getElementById('working').checked
    };
  } else {
     data = {};
  }
}

$(document).on("click", ".save", function() {
  console.log(data);
});

check();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="hidden" id="workingId" value="13245">
<input type="checkbox" name="working" id="working" onclick="check(this);" checked> I am a check box



<button type="button" class="btn save"> Save</button>

这是一种通过多次检查来做到这一点的方法：

var data = {};

function check() {
  data = {};
  $("[name=working]").each((ign, o)=>{
    if ($(o).prop('checked'))
        data[o.id] = $(o).attr('data-val');
  });
}

$(document).on("click", ".save", function() {
  console.log(data);
});

check();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" data-val="13245" name="working" id="working1" onclick="check(this);" checked> I am a check box
<br>
<input type="checkbox" data-val="23245" name="working" id="working2" onclick="check(this);" checked> I am other check box
<br>
<input type="checkbox" data-val="33245" name="working" id="working3" onclick="check(this);" checked> I am yet another check box




<button type="button" class="btn save"> Save</button>

【讨论】：

【解决方案2】：

试试这个：

var $checkBox = $("#working");
var data = {
  id: $("#workingId").val(),
  visible: $checkBox.is(":checked")
};

$(".save").on("click", function () {
  data.visible = $checkBox.is(":checked");
  alert(JSON.stringify(data));
});

// Do other things with the 'data' object...

不需要onclick="check(this);" 逻辑。

注意事项：

考虑切换到最新的 JS。我看到你还在用 ES5 编写代码。
在开发过程中，一致性非常重要。如果已经导入 jQuery，请考虑全面使用它。我在您的初始逻辑中看到您将它用于某些元素选择而不是其他元素。
通过 JS 访问 DOM 时，无论是否使用 jQuery，都尽量保持 DRY。例如，如果您需要在多个位置访问working div，请将查询选择存储在一个变量中。在资源方面，DOM 访问/操作并不像创建变量那样便宜。

此外，您可以在 checkbox 元素中使用 HTML data-* 属性来存储“workingId”并完全删除您的 hidden 元素。

【讨论】：