I have a table which has checkbox in each column and I want to get the 'name' attribute of checked checkbox. Below is the checkbox look like. Each checkbox has different name associated with row and column. Syntax of name attribute is [row_name-col_name]:
I tried like the below in a JS file:
var formid = jQuery(elem).attr('id');
var checkdvalue = [];
var j = 0;
jQuery('#ecf_table').find('tr').each(function() {
var row = jQuery(this);
if (row.find('input[type="checkbox"]').is(':checked')) {
checkdvalue[j++] = jQuery(row.find('input[type="checkbox"]')).attr('name');
}
alert(checkdvalue);
});
I need an array which looks like A.4-2,A.4-3,A.6-2 for the above table. However I am getting A.4-1,A.6-1 only. Please help me to get desired value.
You don't have to loop through the entire table, you can just select all checked checkboxes on the page. If you wish to limit it to that table, use selector #ecf_table input[type="checkbox"]:checked instead.
function calculate() {
var arr = [];
$('input[type="checkbox"]:checked').each(function () {
arr.push($(this).attr('name'));
});
console.log(arr);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="A.1">
<input type="checkbox" name="A.2">
<input type="checkbox" name="A.3">
<input type="checkbox" name="B.1">
<input type="checkbox" name="B.2">
<input type="checkbox" name="B.3">
<button onclick="calculate()">Click me</button>
The issue with your code is that your selector finds a collection of checkboxes. You then call attr() on that collection, but that method will only look at the first element found, not all of them.
To make the logic work you could instead select all the checked boxes and use map() to build the array from them. Using that method, all your code could be reduced to this:
var checkedvalue = $('#ecf_table :checkbox:checked').map(function() {
return this.name;
});
I did a small edit to your code.
This should work fine.
function TestMethod()
{
var checkdvalue = [];
var j = 0;
jQuery('#ecf_table').find('tr').each(function () {
var row = jQuery(this);
row.find('input[type="checkbox"]').each(function () {
var checkbox = jQuery(this);
if(checkbox.prop("checked") == true)
{
checkdvalue[j++] = checkbox.attr("id");
}
});
});
alert(checkdvalue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
<div>
<table id="ecf_table">
<tr>
<td colspan="6">Advanced Scrum Product Owner</td>
</tr>
<tr>
<td>e-Competence Level</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>A.4</td>
<td><input type="checkbox" id="A.4-1"/></td>
<td><input type="checkbox" id="A.4-2"/></td>
<td><input type="checkbox" id="A.4-3"/></td>
<td><input type="checkbox" id="A.4-4"/></td>
<td><input type="checkbox" id="A.4-5"/></td>
</tr>
<tr>
<td>A.6</td>
<td><input type="checkbox" id="A.6-1"/></td>
<td><input type="checkbox" id="A.6-2"/></td>
<td><input type="checkbox" id="A.6-3"/></td>
<td><input type="checkbox" id="A.6-4"/></td>
<td><input type="checkbox" id="A.6-5"/></td>
</tr>
<tr>
<td>B.1</td>
<td><input type="checkbox" id="B.1-1"/></td>
<td><input type="checkbox" id="B.1-2"/></td>
<td><input type="checkbox" id="B.1-3"/></td>
<td><input type="checkbox" id="B.1-4"/></td>
<td><input type="checkbox" id="B.1-5"/></td>
</tr>
<tr>
<td>B.3</td>
<td><input type="checkbox" id="B.3-1"/></td>
<td><input type="checkbox" id="B.3-2"/></td>
<td><input type="checkbox" id="B.3-3"/></td>
<td><input type="checkbox" id="B.3-4"/></td>
<td><input type="checkbox" id="B.3-5"/></td>
</tr>
</table>
<input type="button" onclick="TestMethod()" value="submit" />
</div>
</form>
Related
I have a series of checkboxes that can accept multiple "checks." What I want to have is have a div shown for every checkbox checked.
I have it set up to capture the value of every checkbox and store it in an array. But now I'm trying to figure out how to display each element for every case, e.g., If A is selected, show A; if A and B are selected, show A & B, etc.
I started doing this as a series of if...then statements, but I feel like that will quickly become unwieldily. Then I thought about using "switch" but couldn't get that to work. Anyone have any thoughts?
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
}
}
if (selected.includes("1")) {
document.getElementById("mango").style.display = "block";
}
else if (selected.includes("1") && selected.includes("2")) {
document.getElementById("mango").style.display = "block" ;
document.getElementById("apple").style.display = "block" ;
}
else {
console.log("Oops");
}
console.log(selected.includes("2"));
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
You are over complicating this. There is a one to one relationship between the checkboxes and the content elements.
Just loop over the checkboxes and parse their id to get the associated content id and within that loop update the display of the associated content element every iteration.
Or do the reverse , loop over the content elements and see if the associated checkbox is checked.
You could make it even simpler by setting the values as the content id and skip a line of parsing the checkbox id. Then the content id would be el.value
function GetSelected() {
document.querySelectorAll('#tblFruits input').forEach((el) => {
const contentId = el.id.replace('chk', '').toLowerCase()
document.getElementById(contentId).style.display = el.checked ? 'block' : 'none';
});
}
#mango,
#apple,
#banana,
#guava,
#orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1" /><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2" /><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3" /><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4" /><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5" /><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type="button" value="Get" onclick="GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
In your solution selected array contains entire htmlElement and not just value of the checkbox, but you are treating array as in it contains only value.
This will solve your problem 😉
function clearSelection() {
const divs = document.querySelectorAll('.wrapper > div');
[...divs].forEach(div => {
div.style.display = 'none';
});
}
function GetSelected() {
clearSelection()
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
const selected = Array.prototype.filter.call(chks, checkbox => checkbox.checked).map(data => data.id);
selected.forEach(id => {
var resultId = id.slice(3).toLowerCase();
document.getElementById(resultId).style.display = 'block';
})
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
I would recommend avoiding situations in which you hard-code multiple conditions-- it scales very poorly. Instead, I would find a way to link each checkbox to an option and simply loop the results. In the below, we get the associated text label and use it to find the matched div by id to show it:
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
// clear all previously shown options
const divs = document.querySelectorAll('.wrapper > div');
[...divs].forEach(div => {
div.style.display = 'none';
});
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
let value = chks[i].value;
let text = chks[i].labels[0].textContent.toLowerCase();;
selected.push(value);
document.querySelector(`#${text}`).style.display = 'block';
}
}
// do anything else you need with the checkbox array
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
This solution attempted to not touch/change any of the markup. It's super flimsy as is-- all you need is for the label to have a space and it falls apart. Instead, consider using data- attributes to provide more concrete links between the two pieces of markup that can be used to connect them and make changes as need in a manner that is derived.
Try like this
checkbox value and fruits div having relation. If checkbox banana is checked then div with id banana will get displyed and other div style will set to display:none.
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="mango"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="apple"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="banana"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="guava"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="orange"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
// this for loop will check checkbox current value and will hide fruits divs
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
document.getElementById(chks[i].value).style.display = "block";
} else {
document.getElementById(chks[i].value).style.display = "none";
}
}
console.log(selected); // All selected fruit stored in this array will diaplyed on console
}
Here is working demo https://playcode.io/657247/
I have a radio button with 2 options. It goes like
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td>textbox here</td>
I want to display a textbox when i click "Different".
Its a JSP page. Thanks.
It would be nice to know which javascript framework you use.
With vanilla javascript this is a simple way by adding and removing hidden class on click event simply because that's most likely the only way to guaranty browser compatibility.
https://plnkr.co/edit/e9Jet9kd3f278uROO5R0?p=preview
// js
window.onload = () => {
var rad2 = document.getElementById('r2');
var rad1 = document.getElementById('r1');
var input = document.getElementById('myInput');
rad2.addEventListener("click", function(){
input.classList.remove('hidden');
});
rad1.addEventListener("click", function(){
input.classList.add('hidden');
});
}
// html
<h1>Hello Plunker!</h1>
<td>City : </td>
<td><input type="radio" name="r_city" id="r1" value="Same" checked="checked" /></td>
<td><input type="radio" name="r_city" id="r2" value="Different" /></td>
<td><input id="myInput" class="hidden"/></td>
// css
.hidden {
display: none;
}
Here you go, if you want to again hide it just use .hide() function
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked"/>Same</td>
<td><input type="radio" id="testChecked" name="r_city" value="Different" />Different</td>
<td class="show-this" style="display:none">textbox here</td>
</tr>
</table>
<script>
$('#testChecked').click(function(){
if ($(this).is(':checked'))
{
$('.show-this').show();
}
});
</script>
Make sure to add jQuery***
Here is what you need to do. If you are using a common class for the textbox inside <td> then you can use the class selector instead of input[type="text"].
$(document).ready(function(){
$("input[type='radio']").click(function(){
var textBox = $(this).closest('tr').find('td input[type="text"]');
if($(this).val() === 'Different'){
$(textBox).show();
} else {
$(textBox).hide();
}
});
});
td input[type='text'] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city1" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city1" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
</table>
Using ajax, how to:
loop through each table row
get the respective column checkbox value
upon finish loop, store in database (refer to Database section below)
javascript/jquery
<script type="text/javascript">
$(document).ready(function() {
$('#btnUpdPermission').on('click', function(e) {
var id = '<?php echo $_GET['id'];?>';
$('#table_perm tbody tr').each(function(){
});
});
});
</script>
HTML
<div class="table-responsive">
<table class="table table-bordered" id="table_perm">
<thead>
<th>Permission</th>
<th>Read</th>
<th>Create</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<tr>
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Quotation</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
<tr>
<td>Banking</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td></td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" id="btnUpdPermission">Save</button>
HTML (screenshot)
Database table design
file_id is the foreign key to the file master table (page that authorized user will access)
user_id is the foreign key to the user master table (to whom this access is granted)
rights r=read,c=create,e=edit,d=delete
1.loop through each table row
You should use .each method in combination with children.
children method gets the children of each element in the set of matched elements, optionally filtered by a selector.
$('#table_perm tbody tr').each(function(){
$(this).children('td').each(function(){
});
});
2.get the respective column checkbox value
For this you can use find method.
$('#table_perm tbody tr').each(function(){
$(this).children('td').each(function(){
let checkboxValue = $(this).find('.big-checkbox').val();
});
});
3.upon finish loop, store in database
For this, you can create an asynchronous call by sending all the information via AJAX or you can use a form by passing an action method from server-side.
If I understand it well, each row corresponds to permissions to one file master table, right? (identified by file_id in your database) If that's the case, first I'd put that id each table row (as an id, as a data-* field, etc.)...
<tr data-id="3">
<td>Product</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
<tr data-id="4">
<td>Invoice</td>
<td><input type="checkbox" class="big-checkbox" name="r[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="e[]"/></td>
<td><input type="checkbox" class="big-checkbox" name="d[]"/></td>
</tr>
...................
Then, considering your table structure, to loop your rows and get all the checkboxes values, one option could be...
var myPermissions = {};
$('#table_perm tbody tr').each(function() {
var sectionId = $(this).data('id');
var sectionPermissions = [];
$(this).find('input.big-checkbox:checked').each(function() {
sectionPermissions.push($(this).attr('name').charAt(0));
});
myPermissions[sectionId] = sectionPermissions.join(',');
});
So you finally get an object myPermissions with all permissions for each section...
{
3: "r,c",
4: "r,d",
5: "c,e,d"
....
}
You can send that in your ajax call as a parameter.
NOTE: Two pieces of advice in your code...
There's an error in your html, your closing td lines twice (</td></td>)
If you're going to do this collecting data with ajax and not using a form, to avoid getting the permission letter from the string name, it would be better if you assign a value to each checkbox indicating the letter of that permission. I mean...
<td><input type="checkbox" class="big-checkbox" name="r[]" value="r"/></td>
<td><input type="checkbox" class="big-checkbox" name="c[]" value="c"/></td>
..........
... so then would be easier and cleaner to get the value...
sectionPermissions.push($(this).val());
I hope it helps
I have two tables that are filled with a number of checkboxes (the number is variable based on a retrieval profile defined on a previous screen). I've implemented a Select All check box at the top of each table with the following:
$('#select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
But this function selects all checkboxes in both tables (as it is poorly written to do). Is there an easy method of having the code select all checkboxes in each distinct tables.
Thanks.
You need to make your css more selective. It may not be necessary to use ids and an entirely different click function for each. You can probably just have a single click function bound to both and use the right selector, but hard to know without seeing your html.
If you post your html it will make it easier to help you, but you need something like the following:
$('#select_all1').bind('click', function() {
var checkedState = this.checked;
$('#table1 :checkbox').each(function() {
this.checked = checkedState;
});
});
$('#select_all2').bind('click', function() {
var checkedState = this.checked;
$('#table2 :checkbox').each(function() {
this.checked = checkedState;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select_all1"></input>
<table id="table1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<input type="checkbox" id="select_all2"></input>
<table id="table2">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
It is advisable you use class attribute for your table since Id's are supposed to be unique.
Create a variable to store value for table closest to checkbox current checkbox triggered and Concatenate the variable with Selector.
$('.selectAll').bind('click', function() {
var thisTable = $(this).closest('.checkTable');//closest table of this checkbox triggered
var checkedState = this.checked;//variable for checkbox checked.
$(':checkbox', thisTable).each(function(){//concatenate 'thisTable' variable with css selector and iterate
this.checked = checkedState;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="checkTable">
<tr>
<th> <input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="1"></td>
<td>Hello</td>
</tr>
<tr>
<td><input type="checkbox" id="2"></td>
<td>Hi</td>
</tr>
</table>
<table class="checkTable">
<tr>
<th><input type="checkbox" class="selectAll"></th>
<th>Select All</th>
</tr>
<tr>
<td><input type="checkbox" id="3"></td>
<td>One</td>
</tr>
<tr>
<td><input type="checkbox" id="4"></td>
<td>Two</td>
</tr>
</table>
Use different id for different table or use class for table instead of id like so:
$('.select_all').bind('click', function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
For this code below, I need your expertise.
<html>
<head>
<script>
function delrow() {
document.getElementById("db_grid_row1").style.display = 'none';
document.getElementById("db_grid_row2").style.display = 'none';
document.getElementById("db_grid_row3").style.display = 'none';
document.getElementById("db_grid_row4").style.display = 'none';
}
</script>
</head>
<body>
<form action="rowhide_action.php" method="post" name="save_form">
<input type="button" value="Delete" onClick="delrow();"></input>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Databases</th>
</tr>
</thead>
<tbody id="db_grid">
<tr id="db_grid_row1">
<td><input type="checkbox" name="cbox[]" value="1" ></input></td>
<td><input type="text" name="db[]" value="Oracle"></input></td>
<td><input type="hidden" name="modeflag[]" value="S" ></input></td>
</tr>
<tr id="db_grid_row2">
<td><input type="checkbox" name="cbox[]" value="1"></input></td>
<td><input type="text" name="db[]" value="MySQL"></input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
<tr id="db_grid_row3">
<td><input type="checkbox" name="cbox[]" value="1"></td>
<td><input type="text" name="db[]" value="Cassandra"></input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
<tr id="db_grid_row4">
<td><input type="checkbox" name="cbox[]" value="1"></input></td>
<td><input type="text" name="db[]" value="Mongo"> </input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
</tbody>
</table>
</br>
<input type="submit" value="Save"></input></br></br>
</form>
</body>
</html>
When check-boxes are checked and delete button is clicked, I want
(1) The checked-box rows have to be hidden.
(2) change element modeflag[] value="D" for the hidden rows
please help.
Thanks in advance.
with jquery it goes like this:
$(function() {
$("#del").on('click', delrow);
});
function delrow() {
var checks = $( "input[type=checkbox]:checked" );
checks.parent().parent().hide();
}
DEMO
notice I removed the event from your html element to the javascript..
let me know if you have any questions