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时，请尝试保持尽可能干燥。例如，如果您需要在多个位置访问working div，则将查询选择存储在变量中。在资源方面，DOM访问/操作不像创建变量那样便宜。

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

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

2 个答案: