[英]Javascript or Jquery to check and uncheck all checkbox
I have a form with a list of checkboxs. 我有一个带有复选框列表的表单。 I want to create a checkAll and UncheckAll boxes for better user experience.
我想创建一个checkAll和UncheckAll框以获得更好的用户体验。 I tried a lot of code that I got from Internet, but none of them worked.
我尝试了很多从Internet获得的代码,但没有一个能够工作。 Can you help me to take a look and tell me what is the problem.
你能帮我看看,告诉我是什么问题。 thanks
谢谢
<script type="text/javascript">
function checkAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = true ;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
</script>
<style type="text/css">
#user_info {
border-collapse:collapse;
}
#user_info td, #user_info th {
width:100px;
border:1px solid #CACACA;
padding:5px;
}
#checkbox{
padding:20px 0 20px 250px;
}
</style>
<p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p>
<form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST">
<table id="user_info">
<thead>
<th>User ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Date_Of_Birth</th>
<th>Old Group_ID</th>
<th>New Group_ID</th>
<th>Update GroupID</th>
</thead>
<tbody>
<?php foreach($userGroupData as $value): ?>
<tr>
<td><?php echo $value['user_id']; ?></td>
<td><?php echo $value['last_name']; ?></td>
<td><?php echo $value['first_name']; ?></td>
<td><?php echo $value['date_of_birth']; ?></td>
<td><?php echo $value['group_id_old']; ?></td>
<td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td>
<td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div id="checkbox">
<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
</div>
<div><input type="submit" value="Continue" /></div>
</form>
<br/>
<br/>
Checking & unchecking all checkboxes is very simple in jQuery. 在jQuery中检查和取消选中所有复选框非常简单。 It works like that:
它的工作方式如下:
var all_checkboxes = jQuery(':checkbox'); // choose & store all checkboxes
all_checkboxes.prop('checked', true); // check all of them
all_checkboxes.prop('checked', false); // uncheck all of them
Here is the demonstration: jsfiddle.net/53fbc/ 这是演示: jsfiddle.net/53fbc/
I live on jQuery, so I grabbed some code from here to update your code without using jQuery: http://www.coderanch.com/t/120677/HTML-CSS-JavaScript/find-Checkboxes 我使用jQuery,所以我从这里获取一些代码来更新代码而不使用jQuery: http : //www.coderanch.com/t/120677/HTML-CSS-JavaScript/find-Checkboxes
Here's a working solution: http://jsfiddle.net/nvAtF/1/ 这是一个有效的解决方案: http : //jsfiddle.net/nvAtF/1/
Here's the same solution with jQuery: http://jsfiddle.net/nvAtF/2/ 这是与jQuery相同的解决方案: http : //jsfiddle.net/nvAtF/2/
Here's the code block: 这是代码块:
function toggleCheckboxes(flag) {
var form = document.getElementById('groupImportForm');
var inputs = form.elements;
if(!inputs){
//console.log("no inputs found");
return;
}
if(!inputs.length){
//console.log("only one elements, forcing into an array");
inputs = new Array(inputs);
}
for (var i = 0; i < inputs.length; i++) {
//console.log("checking input");
if (inputs[i].type == "checkbox") {
inputs[i].checked = flag;
}
}
}
Try this: 尝试这个:
$('input:checkbox').attr('checked', true);
for check all 检查所有
$('input:checkbox').attr('checked', false);
for unchek all 取消所有
function checkAll(bx)
{
var cbs = document.getElementsByTagName('input');
for(var i=0; i < cbs.length; i++)
{
if(cbs[i].type == 'checkbox')
{
cbs[i].checked = bx.checked;
}
}
}
这是一个ES6单行程序,可以通过classname取消选中所有内容:
document.querySelectorAll('.classname').forEach((e)=>e.checked=false);
var form = document.getElementById('groupImportForm');
var inputs = form.elements;
var checkboxes = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked =true;
}
}
Javascript version of the example Javascript版本的例子
Same thin using jQuery 使用jQuery同样瘦
$(".uncheckAll']").click(function() {
$('.inputs').attr('checked','checked'); //add the atrribute checked
// $('.inputs').removeAttr("checked"); //remove the attribute checked
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.