JQuery와 : 표시/숨기기 드롭 다운 버튼 체크 박스 선택에 따라

내가 뭘하려고입니다 : 하나 이상의 확인란을 선택하는 경우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'을 가진 여러 입력을 만들고'cboResearch' 같은 id가 여러 개인 select가 잘못된 HTML이고 jQuery 선택자가 그것을 좋아하지 않습니다. 또한 게시 할 때 모두 동일한 양식 태그에 있기 때문에 같은 이름을 가진 모든 이름이 지정된 요소 (예 :'cbSelectAll'' cboResearch')가 데이터 컬렉션으로 게시되는 것과 같은 재미있는 결과를 얻을 수 있습니다. – Nope

HTML을 생성하는 코드 대신 실제 렌더링 된 HTML 출력을 게시 할 수 있습니까? 가능한 솔루션을 테스트하는 것이 훨씬 쉬워 질 것입니다. 일반적으로 스크립트를 게시하고 HTML을 렌더링하면 충분하지만 HTML을 생성하는 코드는 렌더링 된 HTML에 대해 스크립트를 실행하는 것과 관련성이 적습니다. – Nope

잘못 입력했습니다 - 루프에 cbSelectAll 및 cboResearch를 포함하지 않았습니다. 코드를 수정했습니다. 렌더링 된 HTML을 게시하는 방법을 모르겠습니다. – SeanFlynn

코드를 업데이트 해 주셔서 감사합니다. peated와 그렇지 않은 것. 나는이 ^=을 사용하고있는 모든 체크 박스를 선택

jQuery의 Attribute Starts With Selector

당신은 자신의 상태를 검사 확인란의 변경 이벤트에 결합하여 그 기반으로하거나 숨기거나 필요한 요소를 표시 할 수 있습니다.

또한 페이지로드시와 chack-all이 선택/선택 해제 될 때 상태를 검사하고 이에 반응해야합니다. 내가 무엇을 볼 수 있는지에 대한 스크립트를 통해 의견을 추가했습니다.

사이드 참고 : 검사가-모든 상태를 확인하는 경우와 같이 예상대로 작동하지 않는 경우는 속성의 chack - 모든 작동하지 않습니다 주위에 두 번째 시간을 사라 제거됩니다. 또한

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와 : 표시/숨기기 드롭 다운 버튼 체크 박스 선택에 따라

답변

관련 문제