Select all 用于编辑的复选框
[英]Select all Checkbox for editing
问题描述
I Want to edit all the table row items at once using Select all function in jquery but when I click select all it was not showing dropdown but when I click individual checkbox I can see dropdown in first row
Select 一切正常，但当我 select 全部时它没有影响行参考图像 参考图片当我 select 单
我想要的是当我单击 select 所有我希望表格显示下拉菜单时。
HTML 代码
<html>
<head>
<title>Payment Desk</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<?php include('includes/header.php');?>
<!-- LOGO HEADER END-->
<?php if($_SESSION['login']!="")
{
include('includes/menubar.php');
}
?>
<div class="container">
<br />
<div class="table-responsive">
<h3 align="center">Payment Desk</h3><br />
<form method="post" id="update_form">
<div align="left">
<input type="submit" name="multiple_update" id="multiple_update" class="btn btn-info" value="Pay" />
</div>
<br />
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<th width="5%"><input id="checkall" type="checkbox" onclick="checkAll(this)"></th>
<th width="25%">Staus</th>
<th width="20%">Cheque No</th>
<th width="10%">Bank Book Amount</th>
<th width="25%">Bank Statement Amount</th>
<th width="20%">Bank Statement Ref No</th>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</div>
</div>
</body>
</html>
Jquery
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"cheque_select.php",
method:"POST",
dataType:"json",
data:{'bank': "<?php echo $bank ; ?>",'banktype': "<?php echo $banktype ; ?>"},
success:function(data)
{
var html = '';
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td><input type="checkbox" id="'+data[count].id+'" data-status="'+data[count].status+'" data-cheque_no="'+data[count].cheque_no+'" data-iii="'+data[count].iii+'" data-credit="'+data[count].credit+'" data-ref="'+data[count].ref+'" class="check_box" /></td>';
html += '<td>Not Matched</td>';
html += '<td>'+data[count].cheque_no+'</td>';
html += '<td>'+data[count].iii+'</td>';
html += '<td>'+data[count].credit+'</td>';
html += '<td>'+data[count].ref+'</td></tr>';
}
$('tbody').html(html);
}
});
}
fetch_data();
$(document).on('click', '.check_box', function(){
var html = '';
if(this.checked)
{
html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-status="'+$(this).data('status')+'" data-cheque_no="'+$(this).data('cheque_no')+'" data-iii="'+$(this).data('iii')+'" data-credit="'+$(this).data('credit')+'" data-ref="'+$(this).data('ref')+'" class="check_box" checked /></td>';
html += '<td><select name="status[]" id="status_'+$(this).attr('id')+'" class="form-control"><option value="1">Matched</option><option value="0">Not Matched</option></select><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /><input type="hidden" name="gghh[]" value="'+$(this).data('cheque_no')+'" /></td>';
html += '<td>'+$(this).data('cheque_no')+'</td>';
html += '<td>'+$(this).data('iii')+'</td>';
html += '<td>'+$(this).data('credit')+'</td>';
html += '<td>'+$(this).data('ref')+'</td>';
}
else
{
html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-status="'+$(this).data('status')+'" data-cheque_no="'+$(this).data('cheque_no')+'" data-iii="'+$(this).data('iii')+'" data-credit="'+$(this).data('credit')+'" data-ref="'+$(this).data('ref')+'" class="check_box" /></td>';
html += '<td>Not Matched</td>';
html += '<td>'+$(this).data('cheque_no')+'</td>';
html += '<td>'+$(this).data('iii')+'</td>';
html += '<td>'+$(this).data('credit')+'</td>';
html += '<td>'+$(this).data('ref')+'</td>';
}
$(this).closest('tr').html(html);
$('#sum_'+$(this).attr('id')+'').val($(this).data('sum'));
});
$('#update_form').on('submit', function(event){
event.preventDefault();
if($('.check_box:checked').length > 0)
{
$.ajax({
url:"multiple_update.php",
method:"POST",
data:$(this).serialize()+'&'+$.param({'bank': "<?php echo $bank ; ?>"}),
success:function()
{
alert('Data Updated');
fetch_data();
}
})
}
});
});
$('#checkall').change(function(){
$('.check_box').prop("checked")
});
1 个解决方案
解决方案1
0 2021-03-17 13:04:55
您可以使用.trigger('change')来调用复选框的更改事件。 然后，在此事件处理程序中，您可以遍历您的复选框，并根据此将 select 或普通文本添加到您的第二个td 。
演示代码：
$(document).on('change', '.check_box', function() { //loop through each checkboxes... $(".check_box").each(function() { var html = ''; if (this.checked) { //only add select-box html = '<select name="status[]" id="status_' + $(this).attr('id') + '" class="form-control"><option value="1">Matched</option><option value="0">Not Matched</option></select><input type="hidden" name="hidden_id[]" value="' + $(this).attr('id') + '" /><input type="hidden" name="gghh[]" value="' + $(this).data('cheque_no') + '" />'; } else { html = 'Not Matched'; //only text } //get 2nd td add html there $(this).closest('tr').find("td:eq(1)").html(html); $('#sum_' + $(this).attr('id') + '').val($(this).data('sum')); }) }); $('#checkall').change(function() { $('.check_box').prop("checked", this.checked).trigger('change') });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" id="update_form"> <div align="left"> <input type="submit" name="multiple_update" id="multiple_update" class="btn btn-info" value="Pay" /> </div> <br /> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <th width="5%"><input id="checkall" type="checkbox"></th> <th width="25%">Staus</th> <th width="20%">Cheque No</th> <th width="10%">Bank Book Amount</th> <th width="25%">Bank Statement Amount</th> <th width="20%">Bank Statement Ref No</th> </thead> <tbody> <tr> <td><input type="checkbox" id="2" data-status="" data-cheque_no="11" data-iii="1" data-credit="3" data-ref="3" class="check_box"></td> <td>Not Matched</td> <td>11</td> <td>1</td> <td>3</td> <td>3</td> </tr> <tr> <td><input type="checkbox" id="2" data-status="" data-cheque_no="11" data-iii="1" data-credit="2" data-ref="3" class="check_box"></td> <td>Not Matched</td> <td>11</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="checkbox" id="3" data-status="" data-cheque_no="11" data-iii="1" data-credit="2" data-ref="3" class="check_box"></td> <td>Not Matched</td> <td>11</td> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> </div> </form>
选中素数中的所有复选框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.