2013-08-28 5 views
1

xQuery를 통해 생성 된 두 개의 정렬되지 않은 목록 (하나는 알파벳순으로 정렬되고 다른 하나는 알파벳순으로 정렬 됨)이 있습니다. 주파수 정렬 목록은 기본적으로 표시되며 알파벳 목록은 자바 스크립트를 통해 숨겨집니다. 사용자는 링크를 클릭하여 알파벳 목록을 표시 할 수있는 옵션을 가지면 빈도 목록이 숨겨집니다. 사용자는 목록간에 앞뒤로 전환 할 수 있습니다. 두 목록 모두 컬러 박스 팝업에 표시됩니다.두 개의 다른 동적 생성 목록에 대해 모두 선택 버튼

각 목록에 확인란을 추가하고 각 목록에 대해 '전체 선택'/ '모두 지우기'사이를 전환하는 버튼을 포함해야합니다. 내 문제는 주파수 정렬 목록을 볼 때 '모두 선택'을 클릭 한 다음 링크를 클릭하여 알파벳순 목록을 보면 모든 값이 선택되어 있고 토글 버튼 텍스트가 '모두 선택'으로 다시 바뀝니다. '모두 선택'버튼을 클릭하면 텍스트가 '모두 지우기'로 전환되지만 체크 박스는 선택 취소하지 않습니다.

사용자가 두 목록간에 전환 할 때 "재설정"확인란을 사용할 수 있습니까? 알파벳순 목록을 클릭하면 체크 박스가 모두 선택 취소되고 버튼에 '모두 선택'이 표시됩니다. 당신이 이미 사용하고있는 toggle 기능처럼 두 개의 목록이 표시를 취급 할 수없는 와서 어떻게

$(document).ready(function(){ 
    $('.select-all:button').toggle(function(){ 
     $('input:checkbox').attr('checked','checked'); 
     $(this).val('Clear All'); 
     event.preventDefault(); 
    },function(){ 
     $('input:checkbox').removeAttr('checked'); 
     $(this).val('Select All'); 
     event.preventDefault();   
    }) 
    }) 

    <li> 
    <input type="checkbox">{$display-value}</input> 
    </li> 

    <input type="button" value="Select all" class="select-all"></input>, 
    <input type="submit" value="Submit"></input> 

답변

0

: 여기

코드인가? 목록이 표시되면 첫 번째 단계는 확인란 인 모든 자식 노드를 선택하고 checked 특성을 제거하는 것입니다.

또는 상위 요소를 가져 와서 하위 체크 박스에 대한 하위 요소로 이동하고 선택을 해제하는 함수를 작성하십시오. 첫 번째 목록을 올리거나 둘 사이를 전환 할 때이 함수를 먼저 호출하십시오.

내가 이해하지 못하는 부분이 있습니까? 이것은 당신이 묻는 것을 기본적으로 수행하는 예제 코드를 가지고 있기 때문에 간단합니다.

+0

죄송합니다. 저는 jQuery를 사용하는 것을 처음 접했고 이것이 제가 상속 한 코드입니다. 목록이 이미 설정되어 있으므로 확인란을 추가하고 '모두 선택'단추 텍스트를 가져와 사용자가 사전 순 정렬 목록을 열 때 '모두 지우기'상태를 유지하면됩니다. – user2725782

관련 문제