jquery를 사용하여 동적 ID 및 클래스가있는 체크 박스를 선택하거나 선택 취소하십시오.

Question

그리드가 그룹화되어 있습니다. 즉, 그리드에 그룹의 제품이 표시됩니다. 그래서 그 구조는 Group과 그 자식들을 가지고 있습니다. 같은 방식으로 나는 아래에 바인딩하는 다른 그룹과 하위 항목을 갖게 될 것입니다. 부모 클릭으로 전체 하위 목록을 선택하고 선택을 취소하고 싶습니다.

CSHTML 
@{ 
    if (Model.List.Count() > 0) 
    { 
    <table> 
     <tr> 
       <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" onclick="checkUncheckAll(this.class)" /> 
      <td>Name</td> 
      </tr> 
     @foreach (var obj in Model.subList) 
     { 
      <tr> 
       <td> 
        <input type="checkbox" class="cls@(obj.GroupId)" name="@obj.GroupId" /></td> 
       </td> 
       <td> 
        @obj.Name 
       </td> 
      </tr> 
    </table> 
    } 
} 


<input type="button" value="Save" onclick="PickAllCheckedRows();" /> 

나는 아래처럼 시도했지만 성공하지 못했습니다. 또한 저장 버튼을 클릭하면 체크 된 모든 그룹과 그 하위 항목을 선택하려고합니다. 어떤 도움이라도 대단히 감사 할 것입니다.

<script type="text/javascript"> 
    function checkUncheckAll(sender) { 
     alert(sender); 
     var chkElements = document.getElementsByClassName('chkItems'); 
     for (var i = 0; i < chkElements.length; i++) { 
      chkElements[i].checked = sender.checked; 
     } 
    } 

    function PickAllCheckedRows() { 
} 
</script> 

Answer 1

당신은 this.class을 통과하고 있기 때문에 undefined 전달 함수를 호출하고 있습니다 : 그들이 한 경우

onclick="checkUncheckAll(this.class)" 

이 요소는 (그들은 className이 있습니까)는 class 특성이없는, 그리고, 당신이 '클래스을 전달하고 싶지 않다면, 당신은 sender.checked으로 사용하고 있기 때문에 그 자체를 전달하고자합니다.

.class을 호출에서 제거하면됩니다. 당신이 그룹 내의 모든 을하려고하는 경우

, 당신은 확인하기 위해 다른 확인란을 가져올 때 기능에 className를 사용해야합니다/취소 :

function checkUncheckAll(sender) { 
    var chkElements = document.getElementsByClassName(sender.className); 
    // Note ------------------------------------------------^^^^^^^^^^ 
    for (var i = 0; i < chkElements.length; i++) { 
     if (chkElements[i] !== sender) {    // Not strictly necessary I guess, but... 
      chkElements[i].checked = sender.checked; 
     } 
    } 
} 

당신을 가정합니다 ' "all"체크 박스에는 하나의 클래스 만있을 것입니다.