How do I change the "checked" attribute of a check box when clicked?

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.

why would you have to change a checkbox onclick? That is what it does already.... — epascarello, Dec 19 '18 at 21:32
You're setting `data` when the page is loaded, and not updating it when the user clicks. — Barmar, Dec 19 '18 at 21:34
In the fiddle you need to use the "No wrap" setting to make `check()` a global function. See https://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle — Barmar, Dec 19 '18 at 21:35
Clicking the checkbox changes the property automatically. Your code is then undoing that change. — Barmar, Dec 19 '18 at 21:39
`if ($("#working").prop("checked", true))` is not the correct way to test a property. It's setting the property to `true`. Use `if ($("#working").prop("checked") == true)` or just `if ($("#working").prop("checked"))` — Barmar, Dec 19 '18 at 21:40

Nelson Teixeira · Answer 1 · 2018-12-19T22:05:45.890

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>

Grafluxe · Answer 2 · 2018-12-19T22:25:20.173

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.

How do I change the "checked" attribute of a check box when clicked?

2 Answers2