1

我想做的是：

如果选择了一个或多个复选框，则显示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>
4

2 回答 2

1

感谢您更新您的代码，现在可以更清楚地了解重复的内容和不重复的内容。

为了选择我正在使用的所有复选框^=，这是 jQuery 的Attribute Starts With Selector

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

您还想检查该状态并在页面加载以及选中/取消选中 chack-all 时对其做出反应。我在整个脚本中添加了注释，让你看看是什么。

旁注：您的检查全部没有按预期工作，因为当检查状态被删除时，属性消失了，第二次检查全部不起作用。我还在 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>
于 2013-02-04T23:06:45.387 回答
0

一个可能的解决方案

-> 因为你的 id 是自动生成的，所以在你的自动生成的复选框中添加一个类

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

-> 获取选中的复选框的数量并执行所需的任何操作

 $(document).ready(function () {
            $('.cbs').click(function () {
                if($('input.test').filter(':checked').length>0)
                  {
                       //show ur controls
                   }
    else
    {
    //hide controls
    }
        });
    });
于 2013-02-04T22:00:24.193 回答