How to pass the dynamic id of checkbox to jQuery?

Question

I want to pass the dynamic id of the checkbox to jQuery in order to check whether the checkbox is checked or not. Consider the scenario:

<input type = 'checkbox' id ='myid<?= echo '1'; ?>' checked=''>checkbox1
<input type = 'checkbox' id='myid<?= echo '2'; ?>' checked=''>checkbox2

So the ids are: myid1 and myid2. With the help of ids I need to get the current status of the checkbox. Suppose, if I check on checkbox1 it should give true and if I uncheck it should give false to me.

How do I get the id in JavaScript and retrieve the current status based on id?

You don't need the id to add an event, eg: `$("input[type='checkbox']").change(function() { console.log($(this).attr("id"), $(this).is(":checked")); });` — freedomn-m, Feb 21 '19 at 18:29
@freedomn-m `$(this).is(":checked")` please don't encourage pseudoselector usage over property access.... `this.id`, `this.checked` — Taplar, Feb 21 '19 at 18:30
@Taplar meh, if you're using jquery and already have `var el = $(this)` then `el.is(":checked")` is IMO cleaner than `el.get(0).checked`. Is there a reason beyond preference not to use them in this way? — freedomn-m, Feb 21 '19 at 18:33
`el.prop('checked')` is the property access for jQuery. no need to use `:checked` at all if you already have a single element. `:checked` has to perform logic to determine what you want to do. Also if you start out with `this` you are injecting a jQuery object instantiation just to get access to `attr()` and `is()` which can be ignored with just the property access — Taplar, Feb 21 '19 at 18:34
So, just micro optimisation. Right, got it, thanks for responding. — freedomn-m, Feb 21 '19 at 18:37
Might be worth updating most of the answers here: https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery :) — freedomn-m, Feb 21 '19 at 18:38
@freedomn-m the highest voted answer there is using direct property access. And it's not just micro optimisation. It's learning the language. There is a difference between pre-mature optimization, which can be an issue, and continually learning practices that you do that add unnecessary over head to your logic, and working those practices out of your go to solution behaviors. When those become habit, it's not pre-mature optimization anymore. It becomes inherient domain knowledge. — Taplar, Feb 21 '19 at 18:40
But back on topic. @BhaskarCPothineni When do you need to know which one is checked? On page load? When the value changes? When? This can change the solution you need. — Taplar, Feb 21 '19 at 18:45
@Taplar *« if I check on ... it should give ...»* The when is pretty clear in the question. I don't know why the answer below was downvoted, since the *dynamic* term is misused by OP. -- I don't think the comments between you and freedom are so helping in the context of a so simple question. — Louys Patrice Bessette, Feb 21 '19 at 23:20
@LouysPatriceBessette I disagree that the "when" is clear. *"With the help of ids I need to get the current status of the checkbox."* Is "current" on page load? Or is current when ever they change. Those are two different situations involving different solutions. — Taplar, Feb 21 '19 at 23:44
@Taplar: I read nothing that possibly indicates that the checkbox state is unknown on page load. I leave it to you anyway, since there is no OP solution attempt shown... It doesn't worth more efforts. Cheers. — Louys Patrice Bessette, Feb 22 '19 at 02:01

score 0 · Answer 1 · edited Feb 21 '19 at 23:22

Here is a simple way to assign onchange event to each checkbox.

document.querySelectorAll("input[type='checkbox']").forEach((checkbox)=>{
  let input = checkbox;
  input.addEventListener("change", function(){
    console.clear();
    console.log("checkBox with id " + input.id + " is " + input.checked)
  });
});

<input type = 'checkbox' id ='myid1' checked=''>chekcbox1
<input type = 'checkbox' id='myid2' checked=''>checkbox2

And using jQuery:

$("input[type='checkbox']").change(function(){
  console.clear();
  console.log("checkBox with id " + $(this).attr("id") + " is " + $(this).is(":checked"))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = 'checkbox' id ='myid1' checked=''>chekcbox1
<input type = 'checkbox' id='myid2' checked=''>checkbox2

How to pass the dynamic id of checkbox to jQuery?

1 Answers1