CheckBoxList jQuery의 모든 옵션을 선택하십시오.

CheckBoxList가 있고 옵션 중 하나가 '모두'입니다. 사용자가 '모두'를 선택하면 모두를 포함한 모든 옵션을 선택하고 사용자가 '모두'를 선택 취소하면 선택을 취소하고 싶습니다. '모두'를 제외한 다른 옵션을 선택하면 아무 것도하지 않습니다. 누구나 jQuery를 사용하여이 작업을 수행 할 수 있습니까? 나는 OUT 돕기위한 CheckBoxList jQuery의 모든 옵션을 선택하십시오.

감사 ALL jQuery를 1.2.6

<table border="0" onclick="SelectMe(this);" id="one"> 
<tbody> 
    <tr> 
     <td> 
      <input type="checkbox" checked="checked" name="one$0" id="one_0"/><label for="one_0">All</label> 
     </td> 
     <td> 
      <input type="checkbox" name="two$1" id="two_1"/><label for="two_1">Option One</label> 
     </td> 
     <td> 
      <input type="checkbox" name="three$2" id="three_2"/><label for="three_2">Option Two</label> 
     </td> 
     <td> 
      <input type="checkbox" name="four$3" id="four_3"/><label for="four_3">Option Three</label> 
     </td> 
     <td> 
      <input type="checkbox" name="five$4" id="five_4"/><label for="five_4">Option Four</label> 
     </td> 
    </tr> 
</tbody>

사용하고 있습니다. 여기 내 대답 -이 기능은 온 클릭 다음 작동한다

function selectAll(box) { 

//check if this is 'All' checkbox 

var isAll = ($(box).next('label').text() == 'All'); 

//get the checkboxlist 

var theList = $(box).parents('table:first'); 

    //if 'All' is checked/clicked, check all options 

    if (isAll) { 
    var check = theList.find('input:checkbox')[0].checked; 
    $.each(theList.find('input:checkbox'), function(i, v) { 
     v.checked = check; 
    }); 
    } 

// check 'All' option if all other checkboxes are checked  
else { 
    var allchecked = true; 
    $.each(theList.find('input:checkbox'), function(i, v) { 
     if(i) if (!v.checked) allchecked = false; 
    }); 
    theList.find('input:checkbox')[0].checked = allchecked; 
}

출처

2010-01-27 Dave

checkboxlist.items 각 속성하기

귀속은 [업데이트]

$(':checkbox').click(function() { 
    // check if the label following the checkbox is 'All' 
    if ($(this).next('label').text() == 'All') 
    { 
    if ($(this).is(':checked')) 
     $(':checkbox').attr('checked', true) 
    else 
     $(':checkbox').attr('checked', false); 
    } 
});

더 정확한 대신 다음 레이블을 검사 할 때 for 특성에 따라 클릭 한 확인란에 해당하는 레이블을 확인해야합니다.

checkUncheckAll 모든 검사를 통해 루프 기능 -

그래서

if ($(this).next('label').text() == 'All')

이

if ($('label[for="'+$(this).attr('id')+'"]').text() == 'All')

출처

2010-01-27 01:25:46

감사합니다. 그러나 이것은 동적 체크 박스 목록이므로 'All'옵션의 ID를 알 수는 없습니다. 위와 같이 jquery를 전체 체크 박스 목록에만 바인딩 할 수 있습니다. 어떤 옵션이 선택되었거나 선택 해제되었는지를 찾을 수 있습니까? 즉, 사용자가 전체 목록에 바인딩 된 jquery로 '모두'옵션을 선택했는지 감지하십시오. – Dave

@Dave 위의 변경 사항을 확인하여 일반적인 것으로 변경하십시오. –

$ (문서) .ready (함수() {

$('input[type=checkbox]').click(function(){  //detects a check box click 
     if ($(this).attr('id').indexOf("one_0") > -1){ //Checks if 'all' check box was clicked 
      checkUncheckAll($(this).attr('checked')); //Function call to check uncheck based on checked/unchecked state of All check box 
     } 
    }); 
}); 

//Function to check uncheck all check boxes 
function checkUncheckAll(checkedValue) { 
    $('input[type=checkbox]').each(function() {   
     this.checked = checkedValue; 
    }); 
}

이 접근 할 수있는 것은 결함이있다 상자에 넣고 모든 항목을 확인/선택 취소합니다. ID를 적절하게 지정하면 (즉, checkSpec1, checkSpec2 등) 특정 ID가있는 체크 박스를 확인하고 id에 checkSpec 단어가있는 체크 박스를 감지 할 수 있습니다.

이 정보가 도움이되기를 바랍니다.

건배

출처

2010-01-27 01:37:08 Arnkrishn

CheckBoxList jQuery의 모든 옵션을 선택하십시오.

답변

관련 문제