html服务器控件复选框以asp.net Web形式由jQuery隐藏

Question

I have a simple page with three check box with the auto populate the data by jQuery and the fourth one has no data(empty).

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MasterPageWithHTMLInput.aspx.cs" Inherits="Test_WSMS_TV.MasterPageWithHTMLInput" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            // alert('akash');
            $(document).ready(function() {
                var arr = ["val1", "val2", "val3"];
                $('#check label').each(function(index) {
                    if (index < arr.length)
                        $(this).text(arr[index]);    
                });    
            });
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

        <div class="container" id="check">
            <input type="checkbox" id="CheckBox3" runat="server" />
            <label>
            </label>
            <input type="checkbox" id="CheckBox4" runat="server" />
            <label>
            </label>
            <input type="checkbox" id="CheckBox5" runat="server" />
            <label>
            </label>
            <input type="checkbox" id="CheckBox6" runat="server" />
            <label>
            </label>
        </div>

    </asp:Content>

I want to hide the Check box and label which has no data (fourth one) by jQuery.

<input type="checkbox" id="CheckBox6" runat="server"/>
        <label>
        </label>

how can i do it by jQuery?

Answer 1

Perhaps try one of the following

$("#CheckBox6").hide();

or

$("#CheckBox6").toggle();

Answer 2

You can use :empty selector

Select all elements that have no children (including text nodes).

Script

$('#check label:empty').hide();
$('#check label:empty').prev(':checkbox').hide();

Answer 3

I have found an dynamic solution. populate ID and hide the rest of the empty text box

<script type="text/javascript">
       // alert('akash');
        $(document).ready(function () {
            var arr = ["val1", "val2", "val3"];
            $('#check label').each(function (index) {
                if (index < arr.length)
                    $(this).text(arr[index]);
                else {
                    //                    $('#check label:empty').prev(':checkbox').hide();
                    var i = index + 3;
                    var id = "#CheckBox" + i;
                    alert(id);
                    $(id).hide();
                }
            });
         //   $("#CheckBox6").hide();
        });

    </script>

and in main place holder clientidmode="Static" in asp.net is required.

<input type="checkbox" id="CheckBox6" runat="server" clientidmode="Static" />
        <label>
        </label>