html server control Check box hiding by jQuery in asp.net web form

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?

i want to make dynamic like var arr = ["val1", "val2"] then hide the former two check box with label. — Syed Mhamudul Hasan
– Syed Mhamudul Hasan, Commented Aug 12, 2015 at 9:01

Johan · Accepted Answer · 2015-08-12 08:44:01Z

2

Perhaps try one of the following

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

or

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

edited Aug 12, 2015 at 8:44

Johan

8,2861 gold badge35 silver badges46 bronze badges

answered Aug 12, 2015 at 7:59

Franky_frankly

3711 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2015-08-12 07:58:09Z

1

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();

answered Aug 12, 2015 at 7:58

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Syed Mhamudul Hasan · Accepted Answer · 2015-08-12 09:33:55Z

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>

Collectives™ on Stack Overflow

html server control Check box hiding by jQuery in asp.net web form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related