모두 검사 매개 변수를 클릭하거나 변경하십시오.

Question

"모두 확인"체크 상자와 관련하여이 코드를 테스트하고 조사했습니다. 확인란을 프로그래밍 방식으로 선택하면 먼저 클릭 처리기가 호출 된 다음 확인란 상태가 변경되고 변경 핸들러를 사용해야 함을 이해합니다.

내가 사용한 코드는 클릭 핸들러에서 매개 변수를 사용합니다.

변경 핸들러에서도 매개 변수를 사용할 수 있습니까?

다음은 현재 매개 변수가 클릭 핸들러를 통해 전달되는 코드입니다.
.click을 .change로 변경해 보았지만 효과가 없습니다.
테스트에서 각 개별 확인란은 div를 표시하는 기능을 트리거하지만 'check_all'확인란을 선택하면 트리거되지 않습니다.

fiddle으로 사용할 수 있습니다.

이 문제에 도움을 주셔서 감사합니다.

는 CSS :

.toBeCompared_k { 
     display: block; 
} 
.toBeCompared_s { 
     display: block; 
} 
.toBeCompared_a { 
     display: block; 
} 

.toBeCompared_new_k { 
     display:inline-block; 
     background:red; 
     border: 1px solid black; 
     margin: 2px; 
     float: left; 
} 
.toBeCompared_new_s { 
     display: inline - block; 
     background: blue; 
     border: 1px solid black; 
     margin: 2px; 
     float: left; 
} 
.toBeCompared_new_a { 
     display: inline - block; 
     background: yellow; 
     border:1px solid black; 
     margin:2px; 
     float:left; 
} 

자바 스크립트 :

$(function() { 
    $("#check_all").change(function() { 
     $('input:checkbox').prop('checked', this.checked); 
    }); 
}); 
$(document).ready(function dynamic_boxes() { 
    $(".ksa_check_k").click({ 
     param1: "k", 
     param2: "World" 
    }, cool_function); 
    $(".ksa_check_s").click({ 
     param1: "s", 
     param2: "World" 
    }, cool_function); 
    $(".ksa_check_a").click({ 
     param1: "a", 
     param2: "World" 
    }, cool_function); 

    function cool_function(event) { 
     var ksa_section = event.data.param1 
     var title = $(this).closest('.ksa_check_group').find('.ksa_check_' + ksa_section).attr("id") 
     //e.g. above returns ksa_on_1k1_1 
     var title_partial = title.substring(nth_occurrence(title, '_', 2) + 1, nth_occurrence(title, '_', 3)) 
     //e.g. above returns 1k1 
     if ($(this).prop('checked')) { 
      var html = '<div id="' + title_partial + '"class="toBeCompared_new_' + ksa_section + '">' + title_partial + '</div>'; 
      $('div.toBeCompared_' + ksa_section).append(html); 
      $('div.toBeCompared_' + ksa_section).show(); 
     } else { 
      $('div[id="' + title_partial + '"]').remove(); 
     } 
    } 
}); 

function nth_occurrence(string, char, nth) { 
    var first_index = string.indexOf(char); 
    var length_up_to_first_index = first_index + 1; 
    if (nth == 1) { 
     return first_index; 
    } else { 
     var string_after_first_occurrence = string.slice(length_up_to_first_index); 
     var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1); 
     if (next_occurrence === -1) { 
      return -1; 
     } else { 
      return length_up_to_first_index + next_occurrence; 
     } 
    } 
} 

HTML :

당신은 당신의 체크 박스에 방아쇠를 발사 할 필요가

<input type="checkbox" name="check_all" id="check_all"> 
<div class="ksa_check_group"> 
    <span>1k1</span><input id="ksa_on_1k1_1" class="ksa_check_k" type="checkbox" value="1" name="ksa_on_1k1_1"> 
</div> 
<div class="ksa_check_group"> 
<span>1s1</span><input id="ksa_on_1s1_1" class="ksa_check_s" type="checkbox" value="1" name="ksa_on_1k1_1"> 
</div> 
<div class="ksa_check_group"> 
<span>1a1</span><input id="ksa_on_1a1_1" class="ksa_check_a" type="checkbox" value="1" name="ksa_on_1k1_1"> 
</div> 

<div class="toBeCompared_k"></div> 
<div class="toBeCompared_s"></div> 
<div class="toBeCompared_a"></div> 

Answer 1

$('*[class^="toBeCompared_new_"]').hide(); 
    $('*[class^="ksa_check_"]').trigger("change"); 

Fiddle update

Answer 2

는 $(function(){}) 및 $(document).ready(function(){})를 모두 포함하는 http://jsfiddle.net/guest271314/65p5N/

참고 원래의 게시물 업데이트이

(업데이트) (패턴)

$(document).ready(function() {   
     $(document).on("change", "#check_all", { 
      boxes: $(".ksa_check_group > input[type=checkbox]") 
     }, function (e) { 
      $(e.target).attr("checked");   
      function toggle(_, o) { 
       var _toggle = (o === false ? true : false); 
       return _toggle 
      }; 
      $(e.data.boxes).not(":checked").prop("checked", toggle).change();  
      if ($(e.target).hasClass("changed")) { 
       $(e.data.boxes).prop("checked", !toggle).change() 
       .each(function (i, el) { 
        $(el).on("click", function (e) {  
         if ($(el).prop("checked") === false 
          && $("#check_all").is(":checked")) {        
          $("#check_all") 
          .removeAttr("checked") 
          .toggleClass("changed") 
         }; 
        }) 
       }); 
      }; 
      return $(e.target).toggleClass("changed"); 
     }); 


    function nth_occurrence(string, char, nth) { 
     var first_index = string.indexOf(char); 
     var length_up_to_first_index = first_index + 1; 
     if (nth == 1) { 
      return first_index; 
     } else { 
      var string_after_first_occurrence = string.slice(length_up_to_first_index); 
      var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1); 
      if (next_occurrence === -1) { 
       return -1; 
      } else { 
       return length_up_to_first_index + next_occurrence; 
      } 
     } 
    }; 


    function cool_function(event) { 
     var ksa_section = event.data.param1 
     var title = $(this).closest('.ksa_check_group').find('.ksa_check_' + ksa_section).attr("id") 
     //e.g. above returns ksa_on_1k1_1 
     var title_partial = title.substring(nth_occurrence(title, '_', 2) + 1, nth_occurrence(title, '_', 3)) 
     //e.g. above returns 1k1 
     if ($(this).prop('checked')) { 
      var html = '<div id="' + title_partial + '"class="toBeCompared_new_' + ksa_section + '">' + title_partial + '</div>'; 
      $('div.toBeCompared_' + ksa_section).append(html); 
      $('div.toBeCompared_' + ksa_section).show(); 
     } else { 
      $('div[id="' + title_partial + '"]').remove(); 
     } 
    }; 

    $(".ksa_check_k").change({ 
     param1: "k", 
     param2: "World" 
    }, cool_function); 
    $(".ksa_check_s").change({ 
     param1: "s", 
     param2: "World" 
    }, cool_function); 
    $(".ksa_check_a").change({ 
     param1: "a", 
     param2: "World" 
    }, cool_function); 
}); 

jsfiddle를 나타납니다 시도? http://api.jquery.com/ready/