Question

我有一个复选框，选中后应该显示表格行，当取消选中时，应该隐藏行。下面是我的代码：

        <tr class='row New Request' style="display:none">
            <td>Storage</td>
            <td><input type="checkbox" name="storage" value="storage"></td>
        </tr>
        <tr class='row New Request' style="display:none">
            <td>Network Infrastructure</td>
            <td><input type="checkbox" id="network" name="network" value="network"></td>
        </tr>
        <tr class='subrow network' style="display:none">
            <td><input type="checkbox" id="Wireless" name="Wireless" value="Wireless Connection">Wireless Connection</td>
            <td><input type="checkbox" id="LAN" name="LAN" value="LAN Connection">LAN Connection</td>
        </tr>
        <tr class='row New Request' style="display:none">
            <td>Security Infrastructure</td>
            <td><input type="checkbox" name="security" value="security"></td>
        </tr>
        <tr class='row New Request' style="display:none">
            <td>New Requset 4</td>
            <td></td>
        </tr>

对于jQuery，这里是：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function changeVal() {
            $('#myHeader').html(this.name);
            $(this).closest('tr').nextAll('.row').hide();
            $(this).closest('tr').nextAll('.subrow').hide();
            $('.'+this.value).show();
            var tempText = "";
            switch(this.value)
            {
                case "Inquiry":
                    tempText="Send Inquiry";
                    break;
                case "Feedback":
                    tempText="Send Feedback";
                    break;
                case "Complain":
                    tempText="File Complain";
                    break;
                case "Request":
                    tempText="New Request";
                    break;
            }
            $('#myHeader').html(tempText).toggle(this.value != 'default');
        }

        $(function(){
            $('#contactSelect').change(changeVal);
        });
    </script>
    <script>
        function changeValSub() {
            $(this).closest('tr').nextAll('.subrow').hide();
            //$('.'+this.value).show();
            alert($(this).select() == false);
            if($(this).select() == false)
                $('.'+this.value).hide();
            else
                $('.'+this.value).show();
        }

        $(function(){
            $('#network').change(changeValSub);
        });
    </script>

这是完整表的一部分，根据下拉列表和复选框显示/隐藏行。

Answer 1

正如聊天室中所讨论的那样。我们做了一些修复，例如将id添加到安全性复选框，还删除了回调函数并使用切换。

以下是最终的jsfiddle：https://jsfiddle.net/g8vukbpk/8/

.toggle();

Answer 2

使用$.is(':checked')代替$.select()。即。

function changeValSub() {
  $(this).closest('tr').nextAll('.subrow').hide();
  if ($(this).is(':checked')) {
    $('.'+this.value).show();
  }
}

请参阅JSFiddle

检查时jQuery复选框操作

2 个答案: