Question

我想做的是：

如果选中了一个或多个复选框，则显示cboResearch和btnResearch

对我来说棘手的部分是复选框名称基于循环。总而言之，我想拥有：

如果选中了一个或多个框，则显示下拉菜单和按钮
如果未选中所有复选框，请隐藏下拉菜单和按钮

我提供了下面的记录集代码以外的所有内容 - 希望它足以解决问题的关键。

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

Answer 1

感谢您更新代码，现在重复和不重复的内容会更加清晰。

选择所有复选框我使用^= jQuery＆＃39; s Attribute Starts With Selector

您可以绑定到复选框的更改事件，检查其状态，并根据隐藏或显示所需的元素。

您还需要检查该状态并在页面加载时以及在检查/取消选中chack-all时对其做出反应。我在整个剧本中添加了评论，以便您了解其中的内容。

旁注：您的check-all无法按预期工作状态被删除属性消失了，第二次绕过 chack-all赢了工作。我还在DEMO中修正了以下内容

DEMO - 在支票上显示下拉/按钮，否则隐藏

DEMO使用以下脚本：

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

DEMO中的HTML

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

Answer 2

可能的解决方案

- ＆GT;由于ur id是自动生成的，因此请在自动生成的复选框中添加一个类

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

- ＆GT;获取已检查的复选框的计数并执行所需的操作

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

Jquery：根据复选框选择显示/隐藏下拉列表和按钮

2 个答案: