如何用jQuery更新表中的所有值？
如何用jQuery更新表中的所有值？
提问于 2020-01-22 17:53:46
我想要更新所有，当我单击update all按钮时，如果我选择下拉列表中的1，然后单击update按钮，我希望在list SALARIES update中选中list SALARIES update，如果我在下拉列表中选择1，当我单击update all时，希望将salaries的所有值都刷新到1。
嗨，我想更新所有，当我点击更新所有按钮。
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to update multiple row with checkbox? </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<h3>How to update multiple row with checkbox using Ajax?</h3>
<div class="form-group col-md-3 ">
<select class="form-control" id="chantier">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-success update-all" data-url="">Update All</button>
<button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
<table class="table table-bordered">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>nom & prenom</th>
<th>cin</th>
<th>matricule</th>
<th>chantier</th>
</tr>
<tr id="tr_id">
<td><input type="checkbox" class="checkbox" data-id="id"></td>
<td>0</td>
<td>jack chim</td>
<td>pa130191</td>
<td>2925019599</td>
<td>2</td>
</tr>
<tr id="tr_id">
<td><input type="checkbox" class="checkbox" data-id="id"></td>
<td>1</td>
<td>najib mareouk</td>
<td>pa454547</td>
<td>2925019988</td>
<td>1</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('#check_all').on('click', function(e) {
if($(this).is(':checked',true))
{
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked',false);
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#check_all').prop('checked',true);
}else{
$('#check_all').prop('checked',false);
}
});
$('.update-all').on('click', function(e) {
var idsArr = [];
$(".checkbox:checked").each(function() {
idsArr.push($(this).attr('data-id'));
});
if(idsArr.length <=0)
{
alert("Please select atleast one record to update.");
} else {
alert("some idea for update all");
}
});
});
</script>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-22 18:19:45
<!DOCTYPE html>
<html>
<head>
<title>How to update multiple row with checkbox? </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<h3>How to update multiple row with checkbox using Ajax?</h3>
<div class="form-group col-md-3 ">
<select class="form-control" id="chantier">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-success update-all" data-url="">Update All</button>
<button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
<table class="table table-bordered">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>nom & prenom</th>
<th>cin</th>
<th>matricule</th>
<th>chantier</th>
</tr>
<tr id="tr_id">
<td><input type="checkbox" class="checkbox" data-id="id"></td>
<td>0</td>
<td>jack chim</td>
<td>pa130191</td>
<td>2925019599</td>
<td>2</td>
</tr>
<tr id="tr_id">
<td><input type="checkbox" class="checkbox" data-id="id"></td>
<td>1</td>
<td>najib mareouk</td>
<td>pa454547</td>
<td>2925019988</td>
<td>1</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('#check_all').on('click', function(e) {
if($(this).is(':checked',true))
{
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked',false);
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#check_all').prop('checked',true);
}else{
$('#check_all').prop('checked',false);
}
});
$('.update-all').on('click', function(e) {
let selected = $('#chantier').val();
if ($(".checkbox:checked").length > 0)
{
$(".checkbox:checked").each(function() {
$(this).closest('tr').find('td:last-child').html(selected);
});
} else {
alert("Please select atleast one record to update.");
}
});
});
</script>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59865634
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号