jQuery的：显示/隐藏下拉列表和按钮基于选中复选框

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

来源

2013-02-04 SeanFlynn

您的循环使用相同的id'cbSelectAll'创建多个输入，并且多个选择使用相同的id'cboResearch'，这是无效的HTML和jQuery选择器不喜欢它。另外，因为它们都在同一个表单标签中，所以在发布时会得到一些有趣的结果，因为所有具有相同名称的命名元素，即：'cbSelectAll''cboResearch'都会作为数据集合发布。 – Nope

您可以发布实际呈现的HTML输出而不是生成HTML的代码吗？这将使测试任何可能的解决方案变得更容易。发布脚本和呈现的HTML通常就足够了，生成HTML的代码与脚本对呈现的HTML执行的相关性较低。 – Nope

我输入错误 - 我不是故意在循环中包含cbSelectAll和cboResearch。我已更正了代码。我不确定如何在这里发布呈现的HTML？ – SeanFlynn

谢谢你更新你的代码，它使现在更清晰什么是重新peated和什么不是。

对于选择我使用^=这是所有复选框jQuery的Attribute Starts With Selector

您可以绑定到复选框检查其状态的变化情况，并基于该隐藏或显示所需的元素。

您还希望检查该状态并在页面加载时以及在全部检查/未选中时对其进行响应。我在整个脚本中添加了一些注释，以便了解具体内容。

侧面说明：您的检查都按预期检查状态为工作不被删除的属性消失了，周围的焯芬都将无法正常工作第二次。我还修复了下面的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-04 23:06:45 Nope

这完美的作品。谢谢！感谢您对jsfiddle的深入了解。这非常漂亮。我将不得不利用它前进。 – SeanFlynn

一个可能的解决方案

- >由于UR 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-04 22:00:24 arun

jQuery的：显示/隐藏下拉列表和按钮基于选中复选框

回答

相关问题