CODEWITHSUNDEEP
jquery
SeanFlynn
SeanFlynn

Reputation: 453

Jquery: Show/Hide Dropdown and button based on checkbox selection

What I am trying to do is:

if one or more checkboxes are selected, display cboResearch and btnResearch

The tricky part to me is that the check box names are based on a loop. So, to summarize, I'd like to have that:

I have provided everything but the recordset code below - hopefully it will suffice for the crux of the question.

<head>
    <!--Jquery drop down menu add-on-->
    <script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.dd.js"></script>
    <script language="javascript">
        $(document).ready(
        function() {
            //JQuery code for drop-down menus  
            try {
                oHandler = $(".mydds").msDropDown().data("dd");
                $("#ver").html($.msDropDown.version);
            } catch (e) {
                alert("Error: " + e.message);
            }
        });

        //Function to select all check boxes.
        $(function() {
            $('.checkall').click(function() {
                $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
            });
        });
    </script>
</head>
<body>
    <form>
        <fieldset>
            <p>Select All
                <input type="checkbox" name="cbSelectAll" id="cbSelectAll" class="checkall">
            </p>
            <% Dim iX iX=0 Do While Not RS.EOF iX=i X + 1 %>
                <p>
                    <input type="checkbox" name="cbSelection<%=iX%>" id="cbSelection<%=iX%>"
                    />
                </p>
            <% RS.MoveNext Loop %>
            <p>
                <select name="cboResearch" id="cboResearch">
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                </select>
            </p>
            <p>
                <input name="btnResearch" type="button" class="button" value="Research" />
            </p>
        </fieldset>
    </form>
</body>

Upvotes: 1

Views: 3960

Answers (2)

Nope
Nope

Reputation: 22339

Thank you for updating your code, it makes a lot clearer now what is repeated and what is not.

For selecting all checkboxes I'm using ^= which is jQuery's Attribute Starts With Selector

You can bind to the change event of the checkboxes inspecting their state and based on that either hide or show the required elements.

You also want to inspect that state and react to it on page load as well as when chack-all is checked/unchecked. I added comments throughout the script for you to see what's what.

Side-note: Your check-all is not working as expected as when checked states are removed the attribute is gone, second time around the chack-all won't work. I also fixed that below in the DEMO

DEMO - show dropdown/button on check, else hide

The DEMO uses the following script:

//If one or more boxes are checked, display dropdown menu and button
//If all check boxes are unchecked, hide dropdown menu and button

// cache the jquery reference to the checkboxes
// Note the ^= in the jQuery selector below selects all elements with a name attribute which starts with `cboSelection`
var $checkboxes = $("input:checkbox[name^='cbSelection']");

// Declare a function which will process the logic when executed
var processControlState = function(){
    var anyCheckBoxSelected = false;

    // iterate through all checkboxes and check if any of them is checked
    $checkboxes.each(function(){
        if(this.checked){
            // indicate we found a checkbox which is checked
            anyCheckBoxSelected = true;

            // exit the each loop, we found one checked which is enough
            return false;
        }
    });


    // check, if we found a checkbox which was checked
    if(anyCheckBoxSelected){
        // yes we did, show the controls
        $("#cboResearch").show();
        $("input[name='btnResearch']").show();
    }
    else{
        // no we have not, hide the controls
        $("#cboResearch").hide();
        $("input[name='btnResearch']").hide();
    }
};

// execute this method on load to ensure you start off in the correct state
processControlState();

// execute processControlState when a checkbox state is changed
$checkboxes.change(function(){
    processControlState();
})

// add call to processControlState aslo to the chack-all checkbox
$('.checkall').click(function () {
    //$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);

    // simply set the other checkboxe's state to this one
    $checkboxes.prop("checked", this.checked);

    // then also call method to ensure the controls are shown/hidden as expected
    processControlState();
});

The HTML from the DEMO

<form>
    <fieldset>
        <p>Select All
            <input type="checkbox" name="cbSelectAll" id="cbSelectAll" class="checkall">
        </p>
        <p>
            <input type="checkbox" name="cbSelection1" id="cbSelection1" />
        </p>
        <p>
            <input type="checkbox" name="cbSelection2" id="cbSelection2" />
        </p>
        <p>
            <input type="checkbox" name="cbSelection3" id="cbSelection3" />
        </p>
        <p>
            <input type="checkbox" name="cbSelection4" id="cbSelection4" />
        </p>
        <p>
            <select name="cboResearch" id="cboResearch">
                <option value="1">option1</option>
                <option value="2">option2</option>
            </select>
        </p>
        <p>
            <input name="btnResearch" type="button" class="button" value="Research"
            />
        </p>
    </fieldset>
</form>

Upvotes: 1

arun
arun

Reputation: 91

A possible solution

-> Since ur id is autogenerated, add a class to your auto generated checkbox

<input type="checkbox" name="cbSelection<%=iX%>" id="cbSelection<%=iX%>" class="test"/>

-> get the count of checkbox which are checked and do whatever is needed

 $(document).ready(function () {
            $('.cbs').click(function () {
                if($('input.test').filter(':checked').length>0)
                  {
                       //show ur controls
                   }
    else
    {
    //hide controls
    }
        });
    });

Upvotes: 0

Related Questions