Question

Some checkboxes in jsp:: 
<input type="checkbox" checked="checked" id="DevId" name="Dev1">Dev
<input type="checkbox" checked="checked" id="CitId" name="Cit1">CIT
<input type="checkbox" checked="checked" id="SitId" name="Sit1">SIT
<inputtype="checkbox" checked="checked" id="NftId" name="Nft1">NFT
<input type="checkbox" checked="checked" id="UatId" name="Uat1">UAT
<input type="checkbox" checked="checked" id="PrePodId" name="PreProd1">Pre-Prod
<input type="checkbox" checked="checked" id="ProdId" name="Prod1">Prod

here is a table
<table id="dataTable" border="1">
<tr>
<th>Serial No.</th>
<th">Message Flow Name</th>
<th>Description</th>
<th>PropertyKey</th>
<th>Development</th>
<th>CIT Value</th>
<th>SIT Value</th>
<th>NFT</th>
<th>UAT</th>
<th>Pre Prod</th>
<th>Prod</th>
</tr>

and some rows
<td><input type="text" name="seriql no.">
<td><input type="text" name="flow name">
<td><input type="text" name="description">
<td><input type="text" name="propertykey">
<td><input type="text" name="Dev">
<td><input type="text" name="Cit">
<td><input type="text" name="SIT">
<td><input type="text" name="NFT">
<td><input type="text" name="UAT">
<td><input type="text" name="Pre-Prod">
<td><input type="text" name="Prod">
</table>

问题::当我点击复选框时说..“DevId”我希望“开发”列隐藏..再次当我再次勾选该复选框时它应该是可见的..可能在jquery中... 亲切的帮助...提前谢谢

<script>
$(document).on('change', 'table thead input', function() {
    var checked = $(this).is(":checked");

    var index = $(this).parent().index();
    $('table tbody tr').each(function() {
        if (checked) {
            $(this).find("td").eq(index).show();
        } else {
            $(this).find("td").eq(index).hide();
        }
    });
});
</script>

我试过这个..需要一些方向..谢谢

Answer 1

我放了正确版本的HTML，因为有很多错误，我还为<th id="Dev">Development</th>分配了一个ID：

<input type="checkbox" id="DevId" name="Dev1"/>Dev
<input type="checkbox" id="CitId" name="Cit1"/>CIT
<input type="checkbox" id="SitId" name="Sit1"/>SIT
<input type="checkbox" id="NftId" name="Nft1"/>NFT
<input type="checkbox" id="UatId" name="Uat1"/>UAT
<input type="checkbox" id="PrePodId" name="PreProd1"/>Pre-Prod
<input type="checkbox" id="ProdId" name="Prod1"/>Prod

<table id="dataTable" border="1">
<tr>
<th>Serial No.</th>
<th>Message Flow Name</th>
<th>Description</th>
<th>PropertyKey</th>
<th id="Dev">Development</th>
<th>CIT Value</th>
<th>SIT Value</th>
<th>NFT</th>
<th>UAT</th>
<th>Pre Prod</th>
<th>Prod</th>
</tr>
<tr>
<td><input type="text" name="seriql no."/></td>
<td><input type="text" name="flow name"/></td>
<td><input type="text" name="description"/></td>
<td><input type="text" name="propertykey"/></td>
<td><input type="text" name="Dev"/></td>
<td><input type="text" name="Cit"/></td>
<td><input type="text" name="SIT"/></td>
<td><input type="text" name="NFT"/></td>
<td><input type="text" name="UAT"/></td>
<td><input type="text" name="Pre-Prod"/></td>
<td><input type="text" name="Prod"/></td>
</tr>
</table>

和javascript很简单：

$(function(){
    $("input[type='checkbox']").on("change", function(){
       var id = $(this).attr("id");
        var is_checked = $(this).is(":checked");
        id = id.substring(0, id.length-2);

        //document.write(id);
        alert(is_checked);

        if(is_checked) {
           $("input[name='"+id+"']").parent().hide();
            $("#"+ id).hide();
        } else {
            $("input[name='"+id+"']").parent().show();
            $("#" + id).show();
        }
    });
});

为了适用于其他列，请为每个<th>分配一个ID。

示例：http://jsfiddle.net/CxskE/1/

使用jquery隐藏取消隐藏列

1 个答案: