admin管理员组文章数量:1327684
I would like to to use a single button click to toggle between selecting all check boxes within a particular div/table and deselecting all check boxes. In addition i wanted the link/or button to change names to 'Select All' & ' deselect All'. I've seen similar answers using check boxes or two different button clicks but nothing for this. I would to keep it simple and short using jquery.
HTML
<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check/Uncheck All ">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>I would like to to use a single button click to toggle between selecting all check boxes within a particular div/table and deselecting all check boxes. In addition i wanted the link/or button to change names to 'Select All' & ' deselect All'. I've seen similar answers using check boxes or two different button clicks but nothing for this. I would to keep it simple and short using jquery.
HTML
<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check/Uncheck All ">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>4 Answers
Reset to default 5How about like this:
$(function() {
$(document).on('click', '#checkAll', function() {
if ($(this).val() == 'Check All') {
$('.button input').prop('checked', true);
$(this).val('Uncheck All');
} else {
$('.button input').prop('checked', false);
$(this).val('Check All');
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check All">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>Try this code:
$('#checkAll').click(function(){
if($( 'input[name="option1"]:checked' ).length>0){//any one is checked
$('.button input').prop('checked', false);
}
else{
$('.button input').prop('checked', true);
}
})
<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check All">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>
Have a class that maintains the state of the checkboxes. use that to toggle the checked property of the checkboxes.
var $checkboxes = $('.first');
var $selectAllCheckbox = $('#checkAll');
$selectAllCheckbox.on('click', function() {
var $this = $(this);
var allChecked = true;
if ($this.hasClass('checked-all')) {
$this.removeClass('checked-all');
allChecked = false;
} else {
$this.addClass('checked-all');
}
$checkboxes.prop('checked', allChecked);
});
// Maintain the state if the checkbox is
// checked individually
$('.first').on('change', function() {
var isChecked = true;
$.each($checkboxes, function(i, checkbox) {
if(!$(checkbox).is(':checked')) {
isChecked = false;
}
});
isChecked ? $selectAllCheckbox.addClass('checked-all')
: $selectAllCheckbox.removeClass('checked-all');
});
jSFiddle
<script>
jQuery(document).ready(function(e)
{
jQuery(".check_all").click(function()
{
jQuery(".all_checked").attr('checked', $(this).is(':checked') ? true : false);
})
});
</script>
HTML
<input type="checkbox" class="check_all"/>
<input type="checkbox" class="all_checked"/>
<input type="checkbox" class="all_checked"/>
<input type="checkbox" class="all_checked"/>
本文标签： javascriptHow to SelectDeselect All Checkboxes using jQuery with a one ButtonStack Overflow
版权声明：本文标题：javascript - How to SelectDeselect All Checkboxes using jQuery with a one Button? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742216204a2434610.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论