How do I check/uncheck a checkbox input button in html table?
Learn How To See If Checkbox Is Checked In HTML Table
Below is the code:
<!DOCTYPE html>
<html>
<head>
<title> Checkbox CRUD </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Code With Mark">
<meta name="authorUrl" content="http://codewithmark.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function($)
{
//--->deletel single row > start
function remove_curr_tbl_row(ele)
{
ele.closest('tr').css('background-color', 'red');
ele.closest('tr').fadeOut('slow', function()
{
$(this).remove();
});
};
$(document).on('click', '.btn_delete', function(event)
{
event.preventDefault();
remove_curr_tbl_row($(this));
});
//--->deletel single row > start
//--->select/unselect all > start
function select_unselect_checkbox (this_el, select_el)
{
if(this_el.prop("checked"))
{
select_el.prop('checked', true);
}
else
{
select_el.prop('checked', false);
}
};
$(document).on('change', '.select_all_items', function(event)
{
event.preventDefault();
var ele = $(document).find('.item_id');
select_unselect_checkbox($(this), ele);
});
//--->select/unselect all > end
//--->deletel selected rows > start
function remove_all_checked_val(ele)
{
ele.each(function(index, v1)
{
if($(this).prop("checked"))
{
$(this).closest('tr').css('background-color', 'red');
$(this).closest('tr').fadeOut('slow', function()
{
$(this).remove();
});
}
});
};
$(document).on('click', '.btn_delete_val', function(event)
{
event.preventDefault();
var ele = $(document).find('.item_id');
var v1 = remove_all_checked_val(ele);
});
//--->deletel selected rows > end
//--->get selected rows values > start
function get_all_checked_val(ele, attr_lookup)
{
var get_obj = [];
ele.each(function(index, v1)
{
if($(this).prop("checked"))
{
get_obj.push($(this).attr(attr_lookup));
}
});
return get_obj;
};
$(document).on('click', '.btn_get_val', function(event)
{
event.preventDefault();
var ele = $(document).find('.item_id');
var v1 = get_all_checked_val(ele, 'option_id');
var v2 = ''
+'<pre class="bg-secondary">'
+JSON.stringify(v1, null, 5)
+'</pre>';
$(document).find('.post_msg').html(v2);
});
//--->get selected rows values > end
});
</script>
</head>
<body>
<div class="container" style="padding-top:100px;">
<h3 class="text-center">HTML Table Check/Uncheck And Delete Single or Multiple Rows</h3>
<div class="btn btn-success btn_get_val">Get Values</div> | <div class="btn btn-primary btn_delete_val">Delete Bulk</div>
<div style="padding:21px;"></div>
<table class="table">
<tbody>
<tr>
<td> Select<br> <input type="checkbox" class="select_all_items"></td>
<td>Line Num </td>
<td>Email</td>
<td>Option</td>
</tr>
<tr>
<td><input type="checkbox" class="item_id" option_id="1"> </td>
<td>1</td>
<td>mark@gmail.com</td>
<td><i class="fas fa-window-close btn_delete"></i></td>
</tr>
<tr>
<td><input type="checkbox" class="item_id" option_id="2"> </td>
<td>2</td>
<td>code@gmail.com</td>
<td><i class="fas fa-window-close btn_delete"></i></td>
</tr>
<tr>
<td><input type="checkbox" class="item_id" option_id="3"> </td>
<td>3</td>
<td>john@gmail.com</td>
<td><i class="fas fa-window-close btn_delete"></i></td>
</tr>
</tbody>
</table>
<div style="padding:10px;"></div>
<div class="post_msg"></div>
</div>
</body>
</html>
For Web Developers
Stop Building Websites That Pay You Once.
Use Shiply CMS to launch websites faster, manage clients easier, and turn every project into recurring monthly income.
