How to iterate through a variation of an id name using jQuery (such as idname1, idname2)

Question

I have a column of 10 checkboxes, with an additional checkbox at the top titled "Select All". Each checkbox has a sequential id, like "cbox1", "cbox2", etc. When each of these cboxes are clicked, they make an image become visible which resides within a div next to that checkbox. This div is called "tinybox" and it has an id which is sequential and matches it's respective cbox. So the 4th checkbox has an id of cbox4 and upon clicking, it opens tinybox4.

I'm trying to use jQuery, so that when you click the "Select All" checkbox, it loops through each of the cboxes and uses .show() or .hide() on all the tinybox variants.

The following jQuery runs when a user clicks "Select All" checkbox, and currently only either shows or hides #tinypic1. Instead of just tinypic1, it should loop(?) through tinypic1,2,3,4,... so how do I adapt this code to iterate through tinybox(n) where (n) represents an increasing integer from 1-10:

 <script type="text/javascript">
    $(document).ready(function() {
        $('#selectall').click(function() {
            if ($('#selectall').prop('checked')) {
                $("#tinypic1").show();
                $('.cboxes').each(function() {
                    this.checked = true;
                });
            } else {
                $("#tinypic1").hide();
                $('.cboxes').each(function() {
                    this.checked = false;
                });
            }
        });
    });
</script>

Hopefully I'm being clear. I'm trying to verbalize my concept of the solution as best as possible. Thanks for your time

score 1 · Answer 1 · answered Apr 04 '15 at 03:49

1

$('#selectall').toggle(
    function() {
        $('.cboxes').each(function(){
                  $(this).prop('checked', true);
                  $(this).next().show();  
         });
    },
    function() {
        $('.cboxes').each(function(){
                  $(this).prop('checked', false);
                  $(this).next().hide();  
         });
    }
);

answered Apr 04 '15 at 03:49

renakre

8,001
5
46
99

1

Seems like there's a few alternative solutions, thanks for your input erkaner. – Mathomatic Apr 04 '15 at 04:05
I asked the other poster above but am hoping you could help me if possible. How would I adapt a line like `$('#cbox2').click(function() {` to run when any variant of cbox is clicked? Meaning if a user individually clicks the checkbox with id `cbox5` let's say, the script is dynamic so it will run if any variant of cbox(n) is run? Hopefully I'm clear. Thanks a lot – Mathomatic Apr 04 '15 at 04:15
I tried `$("[id^='cbox']").click(function() { `but it doesn't work. – Mathomatic Apr 04 '15 at 04:19
I am not clear what you want to do actually. Can you try `$("[id*=cbox]")` – renakre Apr 04 '15 at 04:22
you can also try this: `$('input:checkbox[id^="cbox_"]:` the trick is this: `_` – renakre Apr 04 '15 at 04:27
Sorry I'll try to be clearer: If a user clicks an individual checkbox (not the Select All box), I'd like only THAT checkbox to open it's tinybox. So if I click on checkbox #5, which has an id="cbox5" which makes visible the tinybox with id="tinybox5".. how do I write ONE script that is dynamic, so that it will run no matter which checkbox (cbox#) is clicked. It's probably something like `$("[id^='cbox']").click(function() { ` And then in my if/else statements I'd have something like `$('[id^='tinybox']').show();` – Mathomatic Apr 04 '15 at 04:29
1

did you try the above code? if they did not work, you can just assign the same class name to all checkboxes such as `mycheckbox`, then you just need this: `$(.mycheckbox).click(function(){ if $(this).prop( "checked" ) ) {$(this).next().show();}else{ $(this).next().hide(); } });` I need to sleep now I hope this works :) – renakre Apr 04 '15 at 04:35

Yatrix · Answer 2 · 2015-04-04T04:10:53.553

1

You can select everything that starts with a string in your selector:

function toggleAll(state) {
    if (state===true) {
         $( "[id^='tinyPic']" ).show();
         $( "[id^='cbox']" ).prop('checked', true);
    } else {
         $( "[id^='tinyPic']" ).hide();
         $( "[id^='cbox']" ).prop('checked', false);
    }
}

edited Apr 04 '15 at 04:10

answered Apr 04 '15 at 03:52

Yatrix

13,361
16
48
78

Very clean and helpful solution. I chose the other answer because it worked instantly but I'm sure this would as well. Thanks for your time. – Mathomatic Apr 04 '15 at 04:06

score 1 · Accepted Answer · answered Apr 04 '15 at 03:55

There are 2 ways you can go about this that are quick.

you can add a loop to your script like the following: Here is a fiddle of this way Fiddle

    $('#selectall').click(function() {
        if ($('#selectall').prop('checked')) {
            for ( i = 1; i <= 10; i++ ) {
              $("#tinypic" + i).show();  
               $("#cbox" + i).prop("checked", true);
            }                

        } else {
            for ( i = 1; i <= 10; i++ ) {
              $("#tinypic" + i).hide();  
               $("#cbox" + i).prop("checked", false);
            }     
        }
    });

You can just do a begins with on the id like so: here is a fiddle of this way fiddle

            if ($('#selectall').prop('checked')) {                    
                  $("[id^='tinypic']").show();  

                   $("[id^='cbox']").prop("checked", true);


            } else {
                  $("[id^='tinypic']").hide();  
                   $("[id^='cbox']").prop("checked", false);

            }

Your first example was the exact solution I was seeking. It was the $("tinypic" + i) notation that I was trying to articulate. Your second solution is also very informative, so your answer was chosen. Thank you! — Mathomatic, Apr 04 '15 at 04:05
Quick question if you don't mind -- How would I adapt a line like `$('#cbox2').click(function() {` to run when any variant of cbox is clicked? Meaning if a user individually clicks the checkbox with id `cbox5` let's say, the script is dynamic so it will run if *any* variant of cbox(n) is run? Hopefully I'm clear. Thank you — Mathomatic, Apr 04 '15 at 04:14
I tried `$("[id^='cbox']").click(function() {` but it doesn't work — Mathomatic, Apr 04 '15 at 04:19

score 0 · Answer 4 · answered Apr 04 '15 at 03:49

0

enter code hereMove your line of code $('#tinypic1').show() to the each block and change it to

this.next().show();

And the same idea for the hide part

answered Apr 04 '15 at 03:49

bondythegreat

1,379
11
18

Thanks, but are you saying I should have this: `$('.cboxes').each(function() { this.next().show(); this.checked = true; ...` because this causes *no* tinyboxes to be shown when I click Select All now. "tinybox" isn't being referenced now it seems.. what am I doing wrong? – Mathomatic Apr 04 '15 at 03:52

How to iterate through a variation of an id name using jQuery (such as idname1, idname2)

4 Answers4