jQuery로 모든 확인란을 선택하십시오.
jQuery 선택기에 대한 도움이 필요합니다. 아래와 같이 마크 업이 있다고 가정합니다.
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
</table>
</form>
#select_all
사용자가 클릭 할 때를 제외하고 모든 확인란을 얻는 방법은 무엇입니까?
도움을 주시면 감사하겠습니다.
귀하의 경우에 작동하는 더 완전한 예 :
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
checkboxes.prop('checked', $(this).is(':checked'));
});
때 #select_all
체크 박스를 클릭, 체크 박스의 상태를 체크하고 현재 양식에있는 모든 체크 박스는 동일한 상태로 설정되어 있습니다.
#select_all
다른 모든 항목과 동일한 상태를 가지므로 선택 항목 에서 확인란 을 제외 할 필요가 없습니다 . 어떤 이유로를 제외해야하는 경우 다음을 #select_all
사용할 수 있습니다.
var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
간단하고 깨끗한
$('#select_all').click(function() {
var c = this.checked;
$(':checkbox').prop('checked',c);
});
attr () 메서드 때문에 Jquery 1.9 이상에서는 최상위 답변이 작동하지 않습니다. 대신 prop ()을 사용하십시오.
$(function() {
$('#select_all').change(function(){
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).prop('checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
});
});
$("form input[type='checkbox']").attr( "checked" , true );
또는 사용할 수 있습니다
$("form input:checkbox").attr( "checked" , true );
HTML을 다시 작성하고 기본 확인란에 대한 클릭 처리기를 제공했습니다.
$(function(){
$("#select_all").click( function() {
$("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
});
});
<form id="frm1">
<table>
<tr>
<td>
<input type="checkbox" id="select_all" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
</table>
</form>
$(function() {
$('#select_all').click(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
});
$(document).ready(function(){
$("#select_all").click(function(){
var checked_status = this.checked;
$("input[name='select[]']").each(function(){
this.checked = checked_status;
});
});
});
jQuery(document).ready(function () {
jQuery('.select-all').on('change', function () {
if (jQuery(this).is(':checked')) {
jQuery('input.class-name').each(function () {
this.checked = true;
});
} else {
jQuery('input.class-name').each(function () {
this.checked = false;
});
}
});
});
이 코드는 저와 잘 작동합니다.
<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>
모든 체크 박스에 체크 박스 _ 클래스 클래스를 추가 하기 만하면됩니다.
쉽고 간단하게 : D
$("#select_all").change(function () {
$('input[type="checkbox"]').prop("checked", $(this).prop("checked"));
});
문제가 발생하면 위의 답변 중 어느 것도 작동하지 않습니다. 그 이유는 jQuery Uniform 플러그인 ( 테마 메트로 닉 작업 )에 있었기 때문에 답변이 도움이되기를 바랍니다. :)
과 협력하여 jQuery를 통일
$('#select-all').change(function() {
var $this = $(this);
var $checkboxes = $this.closest('form')
.find(':checkbox');
$checkboxes.prop('checked', $this.is(':checked'))
.not($this)
.change();
});
모두를 지배하는 하나의 확인란
경량이고 UniformJS 및 iCheck에 대한 기본 지원 기능이 있으며 제어 된 확인란 중 하나 이상이 선택 취소되면 선택 취소됩니다 (모든 제어 된 확인란이 선택되면 선택 취소됨). 물론) jQuery checkAll 플러그인을 만들었습니다 .
Feel free to check the examples on documentation page.
For this question example all you need to do is:
$( '#select_all' ).checkall({
target: 'input[type="checkbox"][name="select"]'
});
Isn't that clear and simple?
$('.checkall').change(function() {
var checkboxes = $(this).closest('table').find('td').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
$("#select_all").live("click", function(){
$("input").prop("checked", $(this).prop("checked"));
}
});
I'm now partial to this style.
I've named your form, and added an 'onClick' to your select_all box.
I've also excluded the 'select_all' checkbox from the jquery selector to keep the internet from blowing up when someone clicks it.
function toggleSelect(formname) {
// select the form with the name 'formname',
// then all the checkboxes named 'select[]'
// then 'click' them
$('form[name='+formname+'] :checkbox[name="select[]"]').click()
}
<form name="myform">
<tr>
<td><input type="checkbox" id="select_all"
onClick="toggleSelect('myform')" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
</table>
Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle:
(function($) {
// Checkbox toggle function for selecting all checkboxes on the page
$.fn.toggleCheckboxes = function() {
// Get all checkbox elements
checkboxes = $(':checkbox').not(this);
// Check if the checkboxes are checked/unchecked and if so uncheck/check them
if(this.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
}
}(jQuery));
Then simply call the function on your checkbox or button element:
// Check all checkboxes
$('.check-all').change(function() {
$(this).toggleCheckboxes();
});
참고URL : https://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery
'developer tip' 카테고리의 다른 글
문자열에서 단어 순서 반전 (0) | 2020.11.06 |
---|---|
PHP의 클래스는 무엇입니까? (0) | 2020.11.06 |
WebStorm에서 코드 서식을 자동으로 지정하는 방법은 무엇입니까? (0) | 2020.11.06 |
Dataset.map, Dataset.prefetch 및 Dataset.shuffle에서 buffer_size의 의미 (0) | 2020.11.06 |
문자열을 NSDate로 변환 (0) | 2020.11.06 |