Question

我有一个表，在数组中有一些星期几行。每行，有一个复选框和两个字段，当我选中此行时，我需要为每一行隐藏此字段复选框

<form action="" method="post" class="form">
<table style="width: 100%;">
    <thead>
    <tr>
        <th>Day</th>
        <th>Is off</th>
        <th>Time From</th>
        <th>Time To</th>

    </tr>
    </thead>
    <tbody>


    <?php
    $i = 1;
    $w_days = array(
        'Saturday' => [0],
        'Sunday' => [1],
        'Monday' => [2],
        'Tuesday' => [3],
        'Wednesday' => [4],
        'Thursday' => [5],
        'Friday' => [6],
    );

    foreach ($w_days as $k => $days)
    {
        ?>

        <tr class="" data-day="<?php echo $k;?>">
            <td><?php echo "$k" ?></td>
            <td class="align_center"><input type="checkbox" id="day_<?php echo $k;?>" class="working_day" onchange="valueChanged()"  value="T"/></td>
            <td>
                <p>
                        <span class="inline-block">
                            <input id="timepicker" name="<?php echo $k?>_from" value="" class="day_<?php echo $k;?> timepicker hide"/>
                        </span>
                </p>
            </td>

            <td>
                <p>
                        <span class="inline-block">
                            <input name="" value="" class="day_<?php echo $k;?> timepicker hide"/>
                        </span>
                </p>
            </td>
            <script type="text/javascript">
                function valueChanged()
                {
                    $('input:checkbox.check').each(function () {
                        if (!this.checked) {
                            $('.' + $(this).attr('id')).hide();
                        }
                    });
                }
            </script>

            <script type="text/javascript">
                $(document).ready(function() {
                    $('.timepicker').timepicker( {
                        showAnim: 'blind'
                    } );
                });
            </script>
        </tr>
        <?php
        $i++;
    }
    ?>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="6"><input type="submit" value="save"/></td>
    </tr>
    </tfoot>
</table>

所以我需要当我检查星期六复选框时星期六输入隐藏，当我删除复选框时显示星期六输入

Answer 1

您可以在不调用valueChanged（）onchange的情况下执行此操作，只需从onchange中删除valueChanged（）。

更改：<input type="checkbox" id="day_<?php echo $k;?>" class="working_day" onchange="valueChanged()" value="T"/>
至
<input type="checkbox" id="day_<?php echo $k;?>" class="working_day" value="T"/>

$(document).ready(function(){
    $(document).on('click', 'input.working_day', function(){
        var _selector = $(this);
        var _element_id = _selector.attr('id');

        if(_selector.is(':checked')){
            $('input.day_' + _element_id).hide();
        }else{
            $('input.day_' + _element_id).show();
        }
    });
});

请告诉我这是否适合您。

选中复选框时隐藏/显示多个输入字段

1 个答案: