PHP dynamically created checkboxes with JQuery .toggle()

Question

I have dynamically created an array of checkboxes in PHP for a form, but I don't want the Submit button to appear unless at least one checkbox is checked. Scouring the Internet most people who want the Submit button to only appear after checking a checkbox only have one "I agree" checkbox. Is it the dynamic creation that is preventing my script working?

PHP↴

// Dynamically create checkboxes from database
function print_checkbox($db){
    $i = 0;
    foreach($db->query('SELECT * FROM hue_flag') as $row) {
        if ($i == 0 || $i == 3 || $i== 6 || $i == 9){
            echo '<br><br>';
        }
        $i++;
        echo '<span class="'.$row['1'].'"><label for="'.$row['1'].'">'.ucfirst($row['1']).'</label><input type="checkbox" name="hue[]" id="hue" value="'.$row['0'].'"></span> ';
    }
}

jQuery↴

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#hue[]').click(function(){
        $('#input_gown').toggle();
    });
});
</script>

PHP function call↴

<?php print_checkbox($conn_normas_boudoir);?>

Admittedly I know nothing about jQuery or JavaScript and am still learning PHP. So, if there's a better way to implement this, let me know.

+1 for use of ↴ :) Also my first guess is the square brackets are conflicting with the jquery selector engine, but I'll have to dig a little deeper to be sure — Jason Sperske, Apr 26 '13 at 16:53
Never mind, you are using the ID selector but passing the input name.. I'd type an answer but I guess this is being pointed out by much faster typers than I as you read this — Jason Sperske, Apr 26 '13 at 16:55
You're giving all your checkboxes the same ID. That's not allowed; IDs have to be unique. — Blazemonger, Apr 26 '13 at 16:59

Blazemonger · Accepted Answer · 2013-04-26T17:26:18.800

2

You're giving all your checkboxes the same ID. That's not allowed; IDs have to be unique.

An easy solution to both problems is to assign all the checkboxes a common class:

    echo '<span class="'.$row['1'].'"><label for="'.$row['1'].'">'.ucfirst($row['1']).'</label><input type="checkbox" name="hue[]" class="hue" value="'.$row['0'].'"></span> ';

Then select the class in jQuery:

$('.hue').change(function(){
    $('#input_gown').toggle();
});

But that may give unexpected results; what if two checkboxes are checked? The #input_gown element will toggle on and off again. Perhaps you only want it shown if at least one checkbox is checked:

$('.hue').change(function(){
    var val = false;
    $('.hue').each(function() {
        val = val || $(this).is(':checked'); // any checked box will change val to true
    });
    $('#input_gown').toggle(val); // true=show, false=hide
});

http://jsfiddle.net/mblase75/AyY3Z/

edited Apr 26 '13 at 17:26

answered Apr 26 '13 at 17:00

Blazemonger

82,329
24
132
176

I see. I thought id was supposed to be the same as name. I guess I should have read [this](http://stackoverflow.com/questions/7470268/html-input-name-vs-id) first. I'll try out your recommendation. – Ken Hikage Apr 26 '13 at 17:10
Sorry, did you rewrite .click to .change because change is a more basic level of the same effect? – Ken Hikage Apr 26 '13 at 17:14
I followed your code verbatim, but the button just remains hidden. How do I go about error checking jQuery? – Ken Hikage Apr 26 '13 at 17:23
Whoops, forgot a `$`. fixed. – Blazemonger Apr 26 '13 at 17:26
Oh, I see it now. I was trying to avoid javaScript for this project, but it looks like I'll need to add that to my plate pretty soon. Thanks a bunch! – Ken Hikage Apr 26 '13 at 17:34

score 0 · Answer 2 · answered Apr 26 '13 at 16:57

0

Your jQuery selector is looking for elements with id hue[]. But your elements have the id of just hue.

Change this:↴

$(document).ready(function(){
    $('#hue[]').click(function(){
        $('#input_gown').toggle();
    });
});

to this (IDs should really always be unique, and the square brackets will need to be escaped to work with the selector engine), (a demo)):↴

$(document).ready(function(){
    $('input[name=hue\\[\\]]').click(function(){
        $('#input_gown').toggle();
    });
});

answered Apr 26 '13 at 16:57

Jason Sperske

27,420
8
63
116

Thanks for that solution. I suppose I should remove the id tag altogether, though. – Ken Hikage Apr 26 '13 at 17:11
You only need an ID attribute if you plan on accessing or styling (there is a valid argument to avoid ID style selectors) elements directly. Blazemonger's approach will also work, but bind to input name I think is most semantically correct with minimal HTML, but that is just me – Jason Sperske Apr 26 '13 at 17:26
Oh really? I thought binding it to the name looked like a work around. I'll keep it in mind in future when I read up on jQuery. Thanks again. – Ken Hikage Apr 26 '13 at 17:37

PHP dynamically created checkboxes with JQuery .toggle()

2 Answers2