Home/ Questions/Q 9249071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T10:06:01+00:00

What I am trying to do is: if one or more checkboxes are selected,

  • 0

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:

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

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0