Select all Checkbox for editing
Question
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 all is working fine but it was not effecting row Reference Image when I select all Reference Image when I select single
What I want is when I click select all I want the table to be show dropdown.
HTML Code
<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 answers
solution1
0 2021-03-17 13:04:55
You can use .trigger('change') to call your change event of checkboxes. Then, inside this event handler you can loop through your checkboxes and depending on this add select or normal text to your second td .
Demo Code :
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Select all checkbox in primefaces
how to select all the checkbox
Select All Checkbox
angular 2 checkbox to select all
Select all checkbox vue
Select All Checkbox in AngularJS
Select All Button with checkbox
Select all checkbox in div
django checkbox select all
React - Checkbox select all
Related Tags