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

Question

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

我已经尝试了一些在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> 

我希望打印一个数组，该数组具有复选框的ID（12345），以及该复选框是否现在处于选中状态/未选中状态。 任何帮助，将不胜感激。

Answer 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> 

Answer 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（不管是否使用jQuery）访问DOM时，请尽量保持DRY。 例如，如果您需要在多个位置访问working div，则将查询选择存储在变量中。 在资源方面，DOM访问/操作不像创建变量那样便宜。

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