Question

我已经在PHP中为表单动态创建了一个复选框数组，但我不希望出现“提交”按钮，除非选中至少一个复选框。在互联网上搜索大多数希望提交按钮仅在选中复选框后出现的人只有一个“我同意”复选框。是动态创建阻止我的脚本工作吗？

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函数call↴

<?php print_checkbox($conn_normas_boudoir);?>

不可否认，我对jQuery或JavaScript一无所知，还在学习PHP。所以，如果有更好的方法来实现这一点，请告诉我。

Answer 1

您为所有复选框提供了相同的ID。这是不允许的; ID必须是唯一的。

这两个问题的简单解决方案是为所有复选框分配一个公共类：

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

然后在jQuery中选择类：

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

但这可能会产生意想不到的结果;如果选中两个复选框怎么办？ #input_gown元素将再次打开和关闭。如果选中至少一个复选框，您可能只想显示它：

$('.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/

Answer 2

您的jQuery选择器正在查找标识为hue[]的元素。但是您的元素的ID为hue。

更改此：↴

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

到此（ID应该总是唯一的，方括号需要转义才能使用选择器引擎），（a demo））：↴

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

PHP使用JQuery .toggle（）动态创建复选框

2 个答案: