Mixing
How to get an underlying element in jquery
0
I have a table row and want to get a cell in the table like:
<tr>
<td><input type="checkbox"id="delete" value="1"></td>
<td id="rowid">1</td>
<input
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
I have jquery code:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
$(this)
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But how can i check the checkbox?
------UPDATE:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is
//checked, turn it to uncheck and if is unchecked, check it
} );
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But now when I click the checkbox it doesn't get checked and the 'selected' class is not added to the .
jquery html datatables
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
add a comment |
0
I have a table row and want to get a cell in the table like:
<tr>
<td><input type="checkbox"id="delete" value="1"></td>
<td id="rowid">1</td>
<input
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
I have jquery code:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
$(this)
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But how can i check the checkbox?
------UPDATE:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is
//checked, turn it to uncheck and if is unchecked, check it
} );
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But now when I click the checkbox it doesn't get checked and the 'selected' class is not added to the .
jquery html datatables
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
I'm not sure what you want to do? My answer below shows you how to check the delete checkbox (although I've tweaked the code to use a class selector instead ofid). Let me know if that wasn't your desired functionality.
– Oliver Trampleasure
Jan 1 at 15:33
add a comment |
0
0
0
I have a table row and want to get a cell in the table like:
<tr>
<td><input type="checkbox"id="delete" value="1"></td>
<td id="rowid">1</td>
<input
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
I have jquery code:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
$(this)
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But how can i check the checkbox?
------UPDATE:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is
//checked, turn it to uncheck and if is unchecked, check it
} );
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But now when I click the checkbox it doesn't get checked and the 'selected' class is not added to the .
jquery html datatables
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
I have a table row and want to get a cell in the table like:
<tr>
<td><input type="checkbox"id="delete" value="1"></td>
<td id="rowid">1</td>
<input
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
I have jquery code:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
$(this)
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But how can i check the checkbox?
------UPDATE:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is
//checked, turn it to uncheck and if is unchecked, check it
} );
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
But now when I click the checkbox it doesn't get checked and the 'selected' class is not added to the .
jquery html datatables
jquery html datatables
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
edited Jan 2 at 8:24
Bastiaan Buitelaar
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
asked Jan 1 at 14:10
Bastiaan BuitelaarBastiaan Buitelaar
375
375
I'm not sure what you want to do? My answer below shows you how to check the delete checkbox (although I've tweaked the code to use a class selector instead ofid). Let me know if that wasn't your desired functionality.
– Oliver Trampleasure
Jan 1 at 15:33
add a comment |
I'm not sure what you want to do? My answer below shows you how to check the delete checkbox (although I've tweaked the code to use a class selector instead ofid). Let me know if that wasn't your desired functionality.
– Oliver Trampleasure
Jan 1 at 15:33
I'm not sure what you want to do? My answer below shows you how to check the delete checkbox (although I've tweaked the code to use a class selector instead of
id). Let me know if that wasn't your desired functionality.– Oliver Trampleasure
Jan 1 at 15:33
I'm not sure what you want to do? My answer below shows you how to check the delete checkbox (although I've tweaked the code to use a class selector instead of
id). Let me know if that wasn't your desired functionality.– Oliver Trampleasure
Jan 1 at 15:33
add a comment |
2 Answers
2
active
oldest
votes
1
Append this code to click event of tr :
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is checked, turn it to uncheck and if is unchecked, check it
UPDATE:
If you want ignore click event on tr when your main target is chekcbox, handle with this code:
$('tr input[type=checkbox]').on('click',function(event){
event.stopPropagation();
})
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
add a comment |
1
You should use the class .delete rather than an id as the checkbox will repeat for each row.
The code below recognises the click on the tr, checks if the .selected class is there and makes the checkbox follow that - i.e. checked if the row is selected.
Hope this helps
Demo
// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996144%2fhow-to-get-an-underlying-element-in-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Append this code to click event of tr :
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is checked, turn it to uncheck and if is unchecked, check it
UPDATE:
If you want ignore click event on tr when your main target is chekcbox, handle with this code:
$('tr input[type=checkbox]').on('click',function(event){
event.stopPropagation();
})
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
add a comment |
1
Append this code to click event of tr :
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is checked, turn it to uncheck and if is unchecked, check it
UPDATE:
If you want ignore click event on tr when your main target is chekcbox, handle with this code:
$('tr input[type=checkbox]').on('click',function(event){
event.stopPropagation();
})
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
add a comment |
1
1
1
Append this code to click event of tr :
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is checked, turn it to uncheck and if is unchecked, check it
UPDATE:
If you want ignore click event on tr when your main target is chekcbox, handle with this code:
$('tr input[type=checkbox]').on('click',function(event){
event.stopPropagation();
})
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
Append this code to click event of tr :
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is checked, turn it to uncheck and if is unchecked, check it
UPDATE:
If you want ignore click event on tr when your main target is chekcbox, handle with this code:
$('tr input[type=checkbox]').on('click',function(event){
event.stopPropagation();
})
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
edited Jan 2 at 11:17
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
answered Jan 1 at 14:31
Sepehr AmirkiaeeSepehr Amirkiaee
663
663
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
add a comment |
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
Going to have issues if target of click is the input itself
– charlietfl
Jan 1 at 14:47
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
When I select the checkbox itself it doesn't work how can I make this work?
– Bastiaan Buitelaar
Jan 1 at 15:23
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@BastiaanBuitelaar, I updated my answer
– Sepehr Amirkiaee
Jan 2 at 11:17
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
@Sepehr Amirkiaee I want to be able to either click the checkbox or the whole tablerow.
– Bastiaan Buitelaar
Jan 4 at 16:09
add a comment |
1
You should use the class .delete rather than an id as the checkbox will repeat for each row.
The code below recognises the click on the tr, checks if the .selected class is there and makes the checkbox follow that - i.e. checked if the row is selected.
Hope this helps
Demo
// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
add a comment |
1
You should use the class .delete rather than an id as the checkbox will repeat for each row.
The code below recognises the click on the tr, checks if the .selected class is there and makes the checkbox follow that - i.e. checked if the row is selected.
Hope this helps
Demo
// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
add a comment |
1
1
1
You should use the class .delete rather than an id as the checkbox will repeat for each row.
The code below recognises the click on the tr, checks if the .selected class is there and makes the checkbox follow that - i.e. checked if the row is selected.
Hope this helps
Demo
// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
You should use the class .delete rather than an id as the checkbox will repeat for each row.
The code below recognises the click on the tr, checks if the .selected class is there and makes the checkbox follow that - i.e. checked if the row is selected.
Hope this helps
Demo
// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>// Add click event to the table, for any row
$('#clients tbody').on('click', 'tr', function() {
// Toggle the selected class
$(this).toggleClass('selected');
// Assign a checked value to the input within that row, the value should match the boolean check for the class active (i.e. false if the class is not present on the row)
$(this).find("input.delete").prop('checked', $(this).hasClass("selected"));
});
// Your button code
$('#button').click(function() {
alert($("#clients tbody tr.selected").length + ' row(s) selected');
});tr.selected {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="clients">
<tbody>
<tr>
<td><input type="checkbox" class="delete" value="1"></td>
<td id="rowid">1</td>
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
<tr>
<td><input type="checkbox" class="delete" value="2"></td>
<td id="rowid">2</td>
<td>3</td>
<td>test3</td>
<td>emai23l@gmail.com</td>
<td>2</td>
<td>6</td>
<td>2018-12-31 09:48:29 </td>
</tr>
</tbody>
</table>
<button id="button">How many rows are selected?</button>answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
edited Jan 1 at 14:48
answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
answered Jan 1 at 14:32
Oliver TrampleasureOliver Trampleasure
1,7261519
1,7261519
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996144%2fhow-to-get-an-underlying-element-in-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm not sure what you want to do? My answer below shows you how to check the delete checkbox (although I've tweaked the code to use a class selector instead of
id). Let me know if that wasn't your desired functionality.– Oliver Trampleasure
Jan 1 at 15:33