jQuery를 사용하여 모든 확인란을 선택 / 선택 취소하려고합니다. 이제 부모 확인란을 선택 / 선택 취소하면 부모 확인란의 텍스트가 checkall / uncheckall로 변경되어 모든 자식 확인란이 선택 / 선택 해제됩니다.
이제 부모 확인란을 입력 버튼으로 바꾸고 버튼의 텍스트를 checkall / uncheckall로 변경하고 싶습니다. 여기 코드가 있습니다. 누구든지 코드를 조정할 수 있습니까?
$( function() {
$( '.checkAll' ).live( 'change', function() {
$( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
$( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
});
$( '.cb-element' ).live( 'change', function() {
$( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );
});
});
<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
답변
이거 한번 해봐 :
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all');
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
답변
이것이 내가 찾은 가장 짧은 방법입니다 (jQuery1.6 이상 필요)
HTML :
<input type="checkbox" id="checkAll"/>
JS :
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
입력 태그에 체크 된 속성을 명시 적으로 추가하지 않으면 jQuery 1.6 이상에서 .attr이 확인란에서 작동하지 않으므로 .prop를 사용하고 있습니다.
예-
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>
답변
이거 한번 해봐:
HTML
<input type="checkbox" name="all" id="checkall" />
자바 스크립트
$('#checkall:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
답변
HTML
<input type="checkbox" name="select_all" id="select_all" class="checkAll" />
자바 스크립트
$('.checkAll').click(function(){
if($(this).attr('checked')){
$('input:checkbox').attr('checked',true);
}
else{
$('input:checkbox').attr('checked',false);
}
});
답변
toogle -event를 더 이상 사용할 수없는 jQuery 1.9+와 호환되는 버튼을 사용하여 확인란을 전환하는 솔루션 :
$('.check:button').click(function(){
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'check all' )
$(this).data('checked', checked);
});
답변
이 시도:
$('.checkAll').on('click', function(e) {
$('.cb-element').prop('checked', $(e.target).prop('checked'));
});
e
는 수행 할 때 생성되는 이벤트 click
이며 e.target
클릭 한 요소 ( .checkAll
)이므로 클래스가 .checkAll` 인 요소와 같은 checked
클래스의 요소 속성 만 입력하면됩니다 .cb-element
.
추신 : 영어 실례합니다!
답변
당신은 이것을 시도 할 수 있습니다
$('.checkAll').on('click',function(){
$('.checkboxes').prop('checked',$(this).prop("checked"));
});`
클래스 .checkAll
는 대량 작업을 제어하는 확인란입니다.