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

Question

I am currently trying to build a list with checkboxes that can be easily checked/unchecked to be included or excluded. When the page loads most of the list items will have the checkbox "checked" attribute to show that the item is included. Im trying to change the checkbox attribute when the user changes the selection so that I can save the results.

I Have tried a few combinations that I have found here on Stackoverflow but none are changing the attribute, Im not sure what Im doing wrong.

 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> 

I am hoping to print an array that has an ID for the checkbox (12345) and whether the checkbox is now checked/unchecked. Any help with this would be greatly appreciated.

Answer 1

I don't know if I understand your question right. Is this what you want ?

 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> 

here's a way to do it with multiple checks:

 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

Try this:

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

No onclick="check(this);" logic is needed.

Notes:

• Consider switching to the latest JS. I see that you're still writing in ES5.
• Consistency is very importing when developing. If already importing jQuery, consider using it across the board. I see in your initial logic that you use it for some element selection and not others.
• When accessing the DOM via JS, with or without jQuery, try to stay as DRY as possible. For example, if you need to access the working div in more than one place, store the query selection in a variable. Resource-wise, DOM access/manipulation is not as cheap as variable creation.

Additionally, you can use an HTML data-* attribute in your checkbox element to store the "workingId" and remove your hidden element(s) entirely.