> 웹 프론트엔드 > JS 튜토리얼 > jquery 체크박스 CHECKBOX 모두 선택, Selection_jquery 반전

jquery 체크박스 CHECKBOX 모두 선택, Selection_jquery 반전

WBOY
풀어 주다: 2016-05-16 19:01:34
원래의
1167명이 탐색했습니다.

사용 방법: 먼저 다음 JS를 파일로 저장하고 나중에 호출할 수도 있습니다. 쉽게 재사용하려면 전자를 사용하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

(function($){
$.fn.checkgroup = function(options){
//병합 설정
settings=$.extend({
groupSelector:null,
groupName:'group_name',
enabledOnly:false
},options || {}) ;

var ctrl_box=this;


//그룹 선택기 재정의 옵션 허용
var grp_slctr = (settings.groupSelector==null) ? settings.groupName ']' : settings.groupSelector;

//필요한 경우 활성화된 확인란만 선택합니다.
if(settings.enabledOnly)
{
grp_slctr = ':enabled'; >}

//"모두 선택" 확인란에 클릭 이벤트 첨부
ctrl_box.click(function(e){
chk_val=(e.target.checked);
$(grp_slctr).attr('checked',chk_val);
//다른 "모두 선택" 상자가 있으면 동기화하세요
ctrl_box.attr('checked',chk_val); );
/ /"그룹"의 체크박스에 클릭 이벤트 첨부
$(grp_slctr).click(function(){
if(!this.checked)
{
ctrl_box. attr('checked', false);
}
else
{
//if #의 chkbxes가 확인된 chkbxes의 #과 같습니다
if($(grp_slctr).size ()==$( grp_slctr ':checked').size()){
ctrl_box.attr('checked','checked')
}
}
}); >//jquery 내에서 이 함수를 연결 가능하게 만듭니다.
return this;
})(jQuery)

주로 다음 사용 방법을 살펴보세요.



코드 복사chk2
chk3

chk4


$(function() {
$("#checkall") .click(function() {
$('.checkall').checkgroup({groupSelector:'.groupclass',enabledOnly:true});
});
})


또는 다음 방법을 사용하세요.




코드를 복사하세요$("#checkall").click(function() {
$( '#checkall').checkgroup({그룹이름:'그룹'})
})


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿