实现复选框标题

时间:2017-08-13 09:22:40

标签: php html

我有一个代码,可以从db中检索数据并将其显示到表中。它工作正常但我想实现一个复选框作为标题的一部分,这将允许我选择/取消选择所有行。标题刚从数据库注释中提取,因此我不知道如何实现checkbox-select/deselect all标题。

这是我的代码,

    <div>
    <form action="test4.php" method="post"><?php

if(is_array($result)){
    echo '
    <fieldset>
        <legend>Assign</legend>
        <div>Changes will affect selected rows only.</div>
        <table width=auto cellpadding=1px cellspacing=0px border=1 align=center>

            <thead>
            <tr>';      

    // column comment from DB as column header
    foreach($result[0] as $key => $val){
        echo '<th>'.$colcomments[$key].'</th>';
        }
    echo '
            </tr>
            </thead>
            <tbody>';
    foreach($result as $row => $info){
    echo '
            <tr>';
    foreach($info as $key => $val){
    if($key=='id'){
    echo '
            <td title="'.$colcomments[$key].'">'.$val.'. 
            <input type="checkbox" name="'.$key.'['.$info['id'].']"
            value="'.$val.'" id="rowid_'.$val.'" />
            <label for="rowid_'.$val.'"></label></td>';
         }
    else {
    echo '
            <td title="'.$colcomments[$key].'">
            <input type="text" name="'.$key.'['.$info['id'].']"
            value="'.$val.'" />
            </td>';
         }
         }
    echo '
            </tr>'; 
         }
    echo '
            </tbody>
            </table>
    </fieldset>';
    }
?>
    <fieldset>
        <legend>Select Date</legend>
        <div>Select Date from and Date to</div>
        <input type="date" name="from" id="from" value="<?=$date['from']; ?>" />
        <input type="date" name="to" id="to" value="<?=$date['to']; ?>" />
        <div><input type="submit" value="Submit" /></div>
    </fieldset>
    </form>
    </div>

这是我的复选框脚本,我不知道在哪里可以插入代码来创建复选框标题。这与之前发布的不同,因为我的问题是我如何创建一个复选框标题,如果我只使用我的数据库中的commments部分将其作为标题。

<script>
jQuery(document).ready(function () {
  jQuery("input[name=checkall]").click(function () {
    jQuery('input[name=checkall]').prop('checked', this.checked);
    jQuery('input[name=checkbox]').prop('checked', this.checked);
  });


  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  jQuery("input[name=checkbox]").click(function(){

    if(jQuery("input[name=checkbox]").length == jQuery("input[name=checkbox]:checked").length) {
        jQuery("input[name=checkall]").prop("checked", true);
    } else {
        jQuery("input[name=checkall]").prop("checked", false);
    }
  });
});
</script>

1 个答案:

答案 0 :(得分:0)

我将此标记为已解决。轻松修复只是将类型设置为hidden

改变
<input type="checkbox" name="'.$key.'['.$info['id'].']"

<input type="hidden" name="'.$key.'['.$info['id'].']"

复选框只是一个冗余,因为我还是需要更新所有行。