I have been using bootstrap tables to fetch data from database using kendo datasource. So in order to make it more interactive i have used a checkbox for simultaneous actions.
I want to delete all the entries with one checkbox. I have read about deleting entries with single checkbox using jQuery. But problem is that I have only one checkbox in table and all the entries are being fetched using kendo data source.
If i am creating confusion then see here-
<script id="template" type="text/x-kendo-template">
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" ></input>
</td></tr>
</script>
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" />
</th>
</tr>
</table>
Now with using kendo datasource i have one column of checkboxes only.
So i am doing this-
<script type="text/javascript">
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
</script>
And still no result. Help!
Try to wrap your jQuery code inside $(document).ready(function(){}); or $(function(){}); to let it see the whole DOM:
$(document).ready(function() {
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
});
Also, your HTML are wrapped inside the script tag, move it outside and remove redundant ' as well as the input tag doesn't need a closing </input> tag:
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" />
</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('.done').click(function (event) {
if ($(this).attr('checked')) {
$('input:checkbox:not(".done")').each(function () {
$(this).attr('checked', 'checked');
});
}
});
});
</script>
Try this. it may works
Try this:
$(function () {
$('.done').on('click', function(){
// i comment this condition if you want selectall for checked or unchecked
//if ($(this).is(':checked')){
$(':checkbox').prop('checked', this.checked);
//}
});
});
Just try this:
Script
$(document).ready(function(){
$('.done').click(function (event) {
$('.chkbxq').each(function () {
$(this).attr('checked', flag);
});
});
});
HTML:
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" class="chkbxq" />
</th>
</tr>
</table>
Related
I have a view like below
<input type="checkbox" id="checkall" name="check_all"/><span>Check All</span>
<table class="table">
<tr>
<th>Selected</th>
<th>Name</th>
</tr>
#foreach (School.Data.ViewModels.Student item in Model.StudentDetails)
{
<tr>
<th>#Html.CheckBoxFor(modelitem => item.IsChecked, new { #onclick = "studentChecked(this);", #name="checked1", #class="idrow" }) </th>
<th> #Html.DisplayFor(modelitem => item.Name)</th>
</tr>
}
</table>
<script>
$(document).on(' change', 'input[name="check_all"]', function () {
$('.idRow').prop("checked1", this.checked);
});
</script>
I have one checkbox by the name "check_all". When I select this checkbox all checkboxes in the table must be selected. How can I do this?.
I have seen this page http://jsfiddle.net/GW64e/, but still didn't work. please help :)
Below code will check all the checkbox
$("#checkall").click(function () {
$(".idrow").attr('checked', this.checked);
});
Below code will uncheck and check 'check all' checkbox based on selection
$(".idrow").click(function() {
if (!this.checked) {
$("#checkall").attr('checked', false);
}
else if ($(".idrow").length == $(".idrow:checked").length) {
$("#checkall").attr('checked', true);
}
});
I have some repeat button control functions as below, is there a way to iterate them and reduce amount of code?
$('[id$=cBC1]').change(function () {
if ($(this).is(':checked')) {
$(".cBC1_Row").prop("disabled", true);
}
else {
$(".cBC1_Row").prop("disabled", false);
}
$('select').material_select();
});
$('[id$=cBC2]').change(function () {
if ($(this).is(':checked')) {
$(".cBC2_Row").prop("disabled", true);
}
else {
$(".cBC2_Row").prop("disabled", false);
}
$('select').material_select();
});
...
Add HTML code as requested, it's wrapped in a visualforce page, each checkbox will manage text fields on the same row in table.
<table>
...
<tbody>
<tr>
<td>
<apex:inputCheckbox id="cBC1"/>
<label for="j_id0:j_id1:cBC1"></label>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC1_Row"/>
</div>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC1_Row"/>
</div>
</td>
</tr>
<tr>
<td>
<apex:inputCheckbox id="cBC2"/>
<label for="j_id0:j_id1:cBC2"></label>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC2_Row"/>
</div>
</td>
<td>
<div class="input-field inline">
<apex:inputField styleClass="validate cBC2_Row"/>
</div>
</td>
</tr>
</tbody>
</table>
You could drop the last number in the selector, and use "attribute contains" instead, assuming you don't have several elements containing the string cBC.
An other, and better option, would be to use classes
$('[id*=cBC]').on('change', function () {
$(".cBC"+ this.id.match(/\d+$/)[0] +"_Row").prop("disabled", this.checked);
$('select').material_select();
});
Yes, following your pattern you can do:
for (let i = 1; i < amoutOfIds; i++) {
$('[id$=cBC'+i+']').change(function () {
if ($(this).is(':checked')) {
$(".cBC"+i+"_Row").prop("disabled", true);
}
else {
$(".cBC"+i+"_Row").prop("disabled", false);
}
$('select').material_select();
});
}
You have to set correctly the amountOfIds you have, and also you should be changing let i = 1 also to begin with the first id you have.
If you can refactor your event handler to work for each element, you could write a single jquery selector and bind the same anonymous event handler to both elements. It is difficult to determine whether or not this refactoring is feasible without seeing the markup of the elements your script is interacting with.
From your code it seems the IDs are matched.
Why not using:
$('[id^="cBC"]').change(function () {
var _id = $(this).id();
$("."+_id+"_Row").prop("disabled", $(this).is(':checked'));
$('select').material_select();
});
I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.
just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function
Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>
I have a table with a checkbox .
I need to know which table rows was checked,
after clicking the Update button.
<div id='ggg' style="position:absolute; bottom:0px" id=>
<table class="display" id="poll">
<th>Polling</th>
<th>rrd</th>
<tr>
<td>ping</td>
<td>10.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked"/>
</td>
</tr>
<tr>
<td>snmp</td>
<td>11.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
</tr>
</table>
<form>
<input type='button' id='update' value='update'>
</form>
</div>
Try this
$('#update').on('click',function(){
$('#poll').find('input:checked').closest('tr').css('background','green');
});
DEMO
You can use :checked selector to get checked checkbox along with .closest(tr) to get row. Try this:
checkedrows = $('input:checked').closest('tr');
Try this
$("#update").click(function () {
$('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
Demo
Edit
$("#update").click(function () {
$("#poll").find('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
You can use like this:
if you want to highlight to tr:
$('#update').on('click',function(){
$(':checked').parents('tr').css('background','#ff0');
});
if you want to highlight to td:
$('#update').on('click',function(){
$(':checked').parent().css('background','#ff0');
});
$('#update').click(function() {
var checkboxes = $('#poll').find('input:checked').closest('tr');
// this will give you which table rows was checked
});
I am trying to delete the rows of my html table inside a form whose checkboxes are checked.
Here is my HTML:
<table>
<tr class="row">
<td><input type="text"></td>
<td><input type="checkbox" value="Delete" name="foo"/></td>
</tr>
<tr class="row">
<td><input type="text"></td>
<td><input type="checkbox" value="Delete" name="foo"/></td>
</tr>
</table>
<input type="button" id="btnDelete" value="Remove Selected"/>
Here is my jquery script:
$(function () {
$('#btnDelete').on('click', function () {
;
$('input[name=foo]').each(function (i, obj) {
if (obj.checked) {
alert("clicked!!" + i + " " + jQuery.type(obj));
obj.parents().eq(1).empty();
}
});
});
});
Now on clicking the btnDelete, the script is invoked as alert shows up.But the grandFather element(i.e. <tr>) is not getting emptied with child getting deleted. Hence the pathogenic line seems to be:
obj.parents().eq(1).empty();
So how should I remove the table row(i.e.<tr>) along with its all child nodes whose checkbox is checked?
You can try .has() function like
$('tr').has('input[name=foo]:checked').remove();
Your code will be reduced to
$(function () {
$('#btnDelete').on('click', function () {
$('tr').has('input[name=foo]:checked').remove();
});
});
Try $(obj).closest('tr').empty(); (Thanks nnnnnn)
Why not keep it simple and try this: http://jsfiddle.net/H9WL7/
$(function () {
$('#btnDelete').on('click', function () {
$('input[name=foo]').each(function () {
if ($(this).is(":checked")) {
$(this).closest('tr').empty();
}
});
});
});
The obj variable is a reference to the DOM element, it's not a jQuery object. Try this:
$(obj).parents().eq(1).empty();
...to get your existing code working. Or, better:
$(obj).closest('tr').remove();
Note that .empty() doesn't remove the tr element itself, it just removes all of its content, so I suggest .remove().
Demo: http://jsfiddle.net/TWL2E/