时间戳

首页 > 解决方案 > 根据选中/未选中复选框隐藏/显示表格

javascript - 根据选中/未选中复选框隐藏/显示表格

问题描述

我在多个页面上有一个表格，我想将复选框状态与他的 id 行连接起来。

我的js部分是：

function myfunc(ele) {

 var values = new Array();
       jQuery.each(jQuery("input[name='language']:not(checked)").closest("tr"),
              function () {
                   values.push(jQuery(this).text());
              });

      console.log("val---" + values);
 }


jQuery(document).ready(function() {
    jQuery("input.alertCheck").click(myfunc);
});

我的表是用 php 制作的：

  $select1 = "SELECT idItem from sat_viewItem where idView='". $idView[0] ."'";
        $idVehGet =     mysqli_query($con, $select1);   
         while ($vehList = mysqli_fetch_array($idVehGet)) { 
        $select   = "SELECT a.idPlateVeh,a,idVeh, b.alertName, b.tmUpdate,b.amLat, b.amLong, b.isDelete, b.alertId FROM sat_vehicle as a inner join alertHistory as b on a.idVeh = b.idVeh where a.idVeh = '" . $vehList['idItem'] . "' and b.tmUpdate>=DATE_SUB(CURDATE(), INTERVAL 1 DAY) ";

        $list_get = mysqli_query($con, $select);

        while ($list = mysqli_fetch_array($list_get)) {
            $date  = strtotime($list['tmUpdate']);
            $date2 = date('d-m-Y H:i:s', $date);
            echo "<tr> ";
         echo "<td class='alertId' style='text-align: left; padding:10px; font-size: 10pt;'>" . $list['alertId'] . "</td>";
            echo "<td style='text-align: left; padding:10px; font-size: 10pt;'>" . $list['idPlateVeh'] . "</td>";
            echo "<td style='text-align: left; padding:10px; font-size: 10pt;'>" . $list['alertName'] . "</td>";
        if($list['isDelete']==1)
        echo "<td style=' padding:10px; '><input type='checkbox' name='language' class='alertCheck' /></td>";
        else
        echo "<td style=' padding:10px; '><input type='checkbox' name='language' class='alertCheck'  checked /></td>";
            echo "<td style='text-align: left; padding:10px; font-size: 10pt;'>" . $date2 . "</td>";
            echo "<td style='text-align: left; padding:10px; font-size: 10pt;'><a href='https://www.google.com/maps/place/" . $list['amLat'] . "," . $list['amLong'] . "' target='_blank'>" . $list['amLat'] . "/ " . $list['amLong'] . "</td>";
            echo "<td style='text-align: left; padding:10px; font-size: 10pt;'> </td>";
            echo "</tr>";
        $select1="SELECT * from alert_status where idVeh='".$list['idVeh']."' and TIMESTAMPDIFF(DAY,timp,UTC_TIMESTAMP())<=1";
        echo $select1; echo "<br>";

        }

但是我在控制台中拥有第一页的所有信息。任何帮助，请。

标签： javascriptjquery

解决方案

您需要使用“on change”功能并检查是否检查了 e.target。然后做任何你想做的事。

jQuery(document).ready(function() {
        jQuery("input.alertCheck").on('change',function(e){
            if(jQuery(e.target).is(':checked')){
                // show
            }else{
                // hide
            }
        });
    });

如果要获取与复选框相关的 table_id，可以像这样使用 data-table-id：

html:

<input type="checkbox" value="" class="" data-table-id='my_table_111'>

JS：

jQuery(document).ready(function() {
        jQuery("input.alertCheck").on('change',function(e){
            var table_id = jQuery(e.target).attr('data-table-id')
            if(jQuery(e.target).is(':checked')){
                jQuery('#'+table_id).show()
            }else{
                jQuery('#'+table_id).hide()
            }
        });
    });

推荐阅读