PHP使用JQuery .toggle()动态创建复选框 - PHP dynamically created checkboxes with JQuery .toggle()

PHP dynamically created checkboxes with JQuery .toggle()

我在PHP中动态地为表单创建了一个复选框数组，但是我不希望Submit按钮出现，除非至少有一个复选框被选中。搜索互联网，大多数人希望提交按钮只出现在勾选了一个复选框之后，只有一个"我同意"复选框。它的动态创建是阻止我的脚本工作吗?

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函数调用

<?php print_checkbox($conn_normas_boudoir);?>

无可否认，我对jQuery和JavaScript一窍不通，我还在学习PHP。如果有更好的实现方法，请告诉我

你给所有的复选框相同的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/

你的jQuery选择器正在寻找id为hue[]的元素。但是你的元素的id只有hue。

改变:↴

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

到此(id应该始终是唯一的，并且需要转义方括号以使用选择器引擎)，(演示)):

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