javascript 添加全选复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10480984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a Select All Checkbox
提问by Dreni
I want to add a check/uncheck all button for this script:
我想为此脚本添加一个选中/取消选中所有按钮：
php:
php:
require_once('includes/commons.php');
$query_get_addresses = 'SELECT * FROM user ORDER BY first_name ASC, last_name ASC';
$result_get_addresses = mysql_query($query_get_addresses);
$addresses_count = mysql_num_rows($result_get_addresses);
?>
script:
脚本：
<script>
$(document).ready(function() {
// initialize
var recipient = $('input[name=recipient]').val();
var recipient_array = new Array();
if(recipient != '') {
recipient_array = recipient.split(',');
for(var i = 0; i < recipient_array.length; i++) {
recipient_array[i] = $.trim(recipient_array[i]);
if(recipient_array[i] == '')
recipient_array.splice(i, 1);
}
$('input[type=checkbox]').each(function() {
if($.inArray(this.value, recipient_array) >= 0) {
$(this).attr('checked', true);
}
});
}
// add and/or remove
$('input[type=checkbox]').click(function() {
var recipient_list = '';
$('input[type=checkbox]').each(function() {
var index = $.inArray(this.value, recipient_array);
if(this.checked) {
if(index < 0)
recipient_array.push(this.value);
}
else {
if(index >= 0) {
recipient_array.splice(index, 1);
}
}
});
$('input[name=recipient]').val(recipient_array);
});
});
</script>
html:
html：
<h2>Choose recipient</h2>
<div><?php
if($addresses_count > 0) {
?><form name="select-recipient-form"><ul><?php
while($row_get_addresses = mysql_fetch_assoc($result_get_addresses)) {
$row_get_addresses = unsanitize($row_get_addresses);
?><li><input type="checkbox" name="recipient[]" id="recipient-1" value="<?php echo $row_get_addresses['recipient']; ?>" /><label for="recipient-1"><?php echo $row_get_addresses['first_name'].' '.$row_get_addresses['last_name'].' <'.$row_get_addresses['recipient'].'>'; ?></label></li><?php
}
?></ul>
</form><br /><?php
} else {
?><p>You don't have any contacts.</p><?php
}
?>
</div>
I have tried to follow some guides. Like this onefor example but I can't get it to work. Any idea how I can achieve this? Thanks
我试图遵循一些指南。像这一次的例子，但我不能得到它的工作。知道我如何实现这一目标吗？谢谢
回答by Mitja Cobec
this worked for me:
这对我有用：
<script type="text/javascript">
$('#form1').ready(function(){
$('.gumb:button').toggle(function(){
$('.tocheck ').attr('checked','checked');
$(this).val('uncheck all')
},function(){
$('.tocheck ').removeAttr('checked');
$(this).val('check all');
})
})
</script>
<input type="button" class="gumb" value="check all" />
<input name="checkbox[]" class="tocheck" type="checkbox" value="<?php echo $rows['member_id'] ?>" />
回答by Petah
Add a class to you check boxes and then use:
向您添加一个类复选框，然后使用：
<form ...>
<input type="checkbox" class="check-class" ... />
...
<button type="button" class="check-all">Check All</button>
</form>
<script type="text/javascript">
(function() {
var checked = false;
$('button.check-all').click(function() {
checked = !checked;
$('.checkbox-class').prop('checked', checked); // jQuery 1.6+
if (checked) $(this).text('Uncheck All');
else $(this).text('Check All);
});
})();
</script>
回答by coolguy
<span><input type="checkbox" class="checkall" />check all</span>
Add a class to all your checkboxes except the check all check box
向所有复选框添加一个类，除了“全选”复选框
<input type="checkbox" class="tocheck ... />
...
....
$(document).ready(function(){
$('.checkall').click(function() {
$('.tocheck ').attr('checked', true);
});
});
回答by swapnilsarwe
If following is the HTML
<input class="checkbox-class" type="checkbox" value="1" /><input class="checkbox-class" type="checkbox" value="2" />
<input class="checkbox-class" type="checkbox" value="3" />
<input type="button" id="clickit" value="Check All" />
如果以下是 HTML
<input class="checkbox-class" type="checkbox" value="1" /><input class="checkbox-class" type="checkbox" value="2" />
<input class="checkbox-class" type="checkbox" value="3" />
<input type="button" id="clickit" value="Check All" />
JS will do the job
JS 将完成这项工作
$("#clickit").click(function() {
if ($(this).val() == 'Check All') {
$('.checkbox-class').attr('checked', 'checked');
$(this).val('Uncheck All');
} else {
$('.checkbox-class').removeAttr('checked');
$(this).val('Check All');
}
});
回答by Ahmed Al Bermawy
This code works fine with me
这段代码对我来说很好用
Jquery
查询
<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>
you only need to add class checkbox_classto all checkbox
您只需要将类checkbox_class添加到所有复选框
HTML
HTML
<input type="checkbox" id="selecctall">
<input class="checkbox_class" name="recipient[]" value="'.$recipientId.'" type="checkbox" />
Easy and simple :D
简单易行：D
回答by Tihomir Grozev
Only that worked for me (btw uses checkbox, not button)
只有对我有用（顺便说一句，使用复选框，而不是按钮）
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>
