How to find specific dynamic class name checkbox?

Question

I have successfully generated dynamic checkboxes, I am trying to make a select all function to select some specific checkboxes. all the check boxes has a dynamic class name as follow

** HTML **

    <input type="checkbox"  value="None" id="itemselect" class="NP<seperator><?php echo $productId; ?>" name="itemselect" />

and some other check boxes are generated as:

<input type="checkbox"  value="None" id="itemselect" class="OS<seperator><?php echo $productId; ?>" name="itemselect" />

What I have to do is to select class="NP........" on select all checkbox checked.

I have checked stack overflow and I found the bellow suggestion that, kind of answering my issue but in the alert I get object object while I supposed to get NP separator and the productId.

Please help me to find out what is wrong with my code.

 $(document).ready(function() {

 $("#itemselectall").on("click", function() {
    var all = $(this);
    $('input:checkbox').each(function() {
    var classchkd =   $(this).attr('class', all.attr('class'));
alert (classchkd);
 });
 });
 });

You shouldn't have more than one element with a particular id, so id="itemselect" should only occur once. — Ja͢ck
– Ja͢ck, Commented Apr 16, 2014 at 1:41

Ja͢ck · Accepted Answer · 2014-04-16 01:43:25Z

1

You can use the "starts with" selector:

$('[class^="NP"]').prop('checked', true)

However, it would make more sense to separate out your classes:

<input type="checkbox"  value="None" id="itemselect" class="NP NP<seperator><?php echo $productId; ?>" name="itemselect" />

Then, you can simply select all of them with:

$('.NP').prop('checked', true);

answered Apr 16, 2014 at 1:43

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kissa Mia Over a year ago

appreciated your reply, It works perfectly and its much simpler. $('.NP').prop('checked', true); Could you vote up my question too? Thanks again

Community · Accepted Answer · 2020-06-20 09:12:55Z

I created a small example.

HTML:

<button id="loadBox">load a checkbox</button>
<button id="toggleBoxes">toggle all boxes</button>
<div id="container">
</div>

javascript:

var counter = 1;
$("#loadBox").click(function(){
    $("#container").append("<input type='checkbox' class='NP1'>" +
                           "checkbox " + counter + "</input><br>");
    counter++;
})
var flipper = true;
$("#toggleBoxes").click(function(){
    $(".NP1").each(function(){
        $(this).prop("checked", flipper);
    })
    if (flipper)
        $("#toggleBoxes").text("uncheck all");
    else
        $("#toggleBoxes").text("check all");
    flipper = !flipper;
})

Clicking the #loadBox button adds a checkbox to the #container <div>. You can adjust this function as necessary to change the class (or load them with PHP—how you do it is mostly irrelevant).

Clicking the toggle all boxes button either makes them all checked or all unchecked, depending on what they were last. The key is to alter how you select them. In this case, I used $(".NP1"). This will change according to the classes you load, so you will need to run a variable through the selector which is set to the input class you want to check or uncheck.

Collectives™ on Stack Overflow

How to find specific dynamic class name checkbox?

2 Answers 2

1 Comment

FIDDLE

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related