checked all/ unchecked all but limit row for check - javascript

I have
<thead>
<tr>
<th>Num</th>
<th>name</th>
<th>date</th>
<th><input type="checkbox" name="m_check" id="m_check" /></th>
</tr>
</thead>
<tbody>
<!-- i have loop for get data -->
<tr>
<td>$Num</td>
<td>$name</td>
<td>$date</td>
<td><input type="checkbox" name="e_check[]" value="<?php echo $companys->data[$i]['com_id'] ?>" class ="e_check" id="e_check_<?php echo $companys->data[$i]['com_id'] ?>" /></td>
</tr>
<!-- end loop for get data -->
</tbody>
this is my script
$('#m_check').change('change',function() {
if ($(this).is(':checked')) {
$('input[name="e_check[]"]:checkbox').attr('checked', true);
$('#ib_email').removeAttr("disabled");
} else {
$('input[name="e_check[]"]:checkbox').attr('checked', false);
$('#ib_email').attr("disabled", "disabled");
}
});
my problem is i need when user checked on m_check it's check element of e_check but check only 10, if my e_check more than 10 also.
please help me to correct my js
I also see this but i still can not custom my code :(
**Confirm my code is not wrong for user checked all, it's checked element row all, unchecked and it's unchecked all element row but i need when user checked all button it's checked element row limit 10 row top and other is still not check

There are a few mistakes in the jQuery. Prop should be used instead of attributes for the checked prop. Also ':checkbox' is not necessary when name="e_check[]" is already a unique identifier. Lastly, checkout the snippet at the bottom to grab the number. With it, you can set the checking behavior to reflect the number grabbed.
$('#m_check').change('change', function () {
if ($(this).is(':checked')) {
$('[name="e_check[]"]').prop('checked', true);
$('#ib_email').removeAttr("disabled");
} else {
$('[name="e_check[]"]').prop('checked', false);
$('#ib_email').attr("disabled", "disabled");
}
var $num = $(this).closest('table').find('td:first');
$num = parseInt($num);
});

You should do it like
$(document).on('change', '#m_check', function() {
$('#m_check').click(function () {
if ($(this).is(':checked')) {
$('input[type=checkbox].e_check').map(function (_, el) {
$(el).prop('checked', true);
});
} else {
$('input[type=checkbox].e_check').map(function (_, el) {
$(el).prop('checked', false);
});
}
});
});
or
$('#m_check').change(function() {
});
Edited:
Now when you will click on <input type="checkbox" name="m_check" id="m_check" /> All of your records will be checked.

you can do in this way.
I am assuming there is class tablecheckbox attachewd to tbody to
uniquely identify the checkbox.
$('#m_check').on('change',function() {
if ($(this).is(':checked')) {
if( $(".tablecheckbox tr input[type='checkbox']").length > 10){
$(".tablecheckbox tr input[type='checkbox']").slice(0,10).prop('checked',true)
}else{
$(".tablecheckbox tr input[type='checkbox']").prop('checked',true)
}
$('#ib_email').removeAttr("disabled");
} else {
$(".tablecheckbox tr input[type='checkbox']").slice(0,10).prop('checked',false)
$('#ib_email').attr("disabled", "disabled");
}
});

Related

Hide table page in javascript

In my code below, when i select a checkbox it displays the name of the item checked. But my problem now is, the table is paginated so when i move to the next page and return, the already checked item goes back unchecked.
The same applies when i check a box and filter using the ajax request, when i return the already checked box will have moved to unchecked state.
How do i hide the table page to resolve this issue?
HTML
<table class="table" id="table" style="background-color:white" >
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach($items as $item)
<tr>
<td><input onclick="return results(this)" data-item="{{$item->toJson()}}" type="checkbox" id="{!! $item->id !!}" name="{!! $item->name !!}" value="{!! $item->price !!}" /> </td>
<td>{{$item->name }}</td>
</tr>
#endforeach
</tbody>
</table>
{{$items->links()}}
JS
function results(item){
var major = JSON.parse(item.dataset.item);
if(item.checked == true) {
$('.panel').append(
'<div class="container "> '+
'<table style="width:100%;" class="table" id="tables">'+
'<thead>'+'<thead>'+
'<tbody>'+
'<tr>'+ '<td class="name" >'+major.name+'</td>'+] '</tr>'+
'</tbody>'+'</table>'+'</div>')}
} else {
});
}
}
}
AJAX
success: function (data) {
console.log(data);
$("#table").slideDown('fast');
var table = $("#table tbody");
table.html("");
$.each(data, function(idx, elem){
table.append(
"<tr><td><input type='checkbox' onclick='return results(this)' data-item='"+JSON.stringify(elem)+"' id='"+elem.id+"' name='"+elem.name+"' value='"+elem.price+"' data-id="+elem.id+" /></td><td >"+elem.name+"</td><tr>"
);
});
}
Saving state is possible via "JavaScript - localStorage" functionality.
Today browsers have capability to save information that is more "cleaner" and informative then cookies.
On "checkbox" element I would add event listener that would start function called "saveState()". In this function I would save information about checkbox.
function saveState()
{
localStorage.setItem("checkBoxStatus", "Checked");
}
This information is saved into browser`s storage and won't be deleted until you delete it yourself.
To delete it you have two options:
`localStorage.removeItem("checkBoxStatus");`
`localStorage.clear();`
Then when you re-enter that page again, while you are "constructing" view you can add small function that will set state equal to the "saved" one.
function resumeState()
{
if(localStorage.getItem("checkBoxStatus") === "Checked)
//get check box and check or uncheck
}
HOW STORED DATA CAN BE USED
It's my point of view but I prefer building my HTML views via JavaScript, as I find it more cleaner way and easier also, because today you have frequent communication with "JavaScript/Ajax" functions and need more responsiveness.
so I would build my entire view with JavaScript Dom
**
function buildView()
{
var element = document.createElement("div");
var checkBox = document.createElement("input");
checkBox.settAttribute("type", "checkbox");
//here we will check
localStorage.getItem("checkBoxStatus") === "Checked" ? checkBox.setAttribute("checked", "true") : checkBox.setAttribute("checked", false);
element.appendChild(checkBox);
document.body.appendChild(element);
}
**
or use setTimeout function and stick to "HTML" views:
<body onload='setTimeout(buildView(), 2000);>'
this will wait until all the views are constructed and start after it.
You can set correct timing depending on how much data you are loading during "onload" event. If it's small data you can even wait for 1 second -> 1000
function buildView()
{
var checkBox = document.getElementById("checkBox");
//here we will check
if(localStorage.getItem("checkBoxStatus") === "Checked")
{
checkBox.setAttribute("checked", "true");
}
else
{
checkBox.setAttribute("checked", false);
}
}
Remember that main here is to use localStorage functionality to save data and after that how you will use that data, totally depends on developers imagination and creativity
I made a fiddle for you so that you can improve it in the way that you can use it for your purpose,here is the fiddle and the code:
HTML:
<div class="checkbox-set">
</div>
<div id = "result">
</div>
Js:
var id = "";
for(i=1 ; i<8 ;i++){
id="checkbox_"+i;
$('.checkbox-set').append('<input type="checkbox" id="'+ id +'" value="Click on me"/> <label for="'+id+'">Click on me</label> <br/> ');
}
var selected = [];
if(sessionStorage.selected) {
// selected = sessionStorage.selected;
var checkedIds= sessionStorage.selected.split(",");
$.each(checkedIds,function(i){
$("#" + checkedIds[i]).prop('checked', true);
selected.push(checkedIds[i]);
});
}
$('input[type="checkbox"]').change(function() {
if(this.checked) {
$(this).each(function(){
selected.push($(this).attr('id'));
//$("#result").html(selected);
});
}
if(!this.checked) {
const index = selected.indexOf($(this).attr('id'));
var tt= selected.splice(index, 1);
//$("#result").html(selected);
}
sessionStorage.selected = selected;
$("#result").html(sessionStorage.selected);
})
please confirm if it is helpful

jQuery how to count elements that are hidden

I created a manual search functionality that displays the results as the user types. Here is the fiddle: https://jsfiddle.net/rtq4jfuq/1/
Here is the HTML
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<input style='width: 300px;' placeholder='search' id='search'>
<table border='1'>
<tr>
<th>Name</th>
</tr>
<tr class='names'>
<td>Bob</td>
</tr>
<tr class='names'>
<td>Ted</td>
</tr>
<tr class='names'>
<td>Steve</td>
</tr>
<tr class='names'>
<td>Sven</td>
</tr>
<tr class='names'>
<td>Magnus</td>
</tr>
</table>
Here is the script
$(document).ready(function() {
$("#search").keyup(function(){
var query = $(this).val();
$(".names").each(function(){
var n = $(this).children("td").html();
if (n.toUpperCase().includes(query.toUpperCase())) {
$(this).css("display", "");
}
else {
$(this).css("display", "none");
}
});
});
});
I want to display a message once there are no rows displayed but how do I check if there are no rows displayed?
Use the :visible filter so see if you've hidden all results:
$(document).ready(function() {
$("#search").keyup(function() {
var query = $(this).val();
$(".names").each(function() {
var n = $(this).children("td").html();
if (n.toUpperCase().includes(query.toUpperCase())) {
$(this).css("display", "");
} else {
$(this).css("display", "none");
// Check to see if all elements have been hidden
if (!$(".names:visible").length) {
// All element hidden, do something here
alert("no results");
}
}
});
});
});
EDIT
FYI - your code can be greatly simplified. This is a quick and dirty example - I'm sure that there's room for further improvement:
$(document).ready(function() {
$("#search").keyup(function() {
var query = $(this).val();
var matches = $(".names").filter(function() {
return $(this).children("td").html().toUpperCase().includes(query.toUpperCase())
}).show();
$(".names").not($(matches)).hide();
if (!$(".names:visible").length) {
$("#myTable").append("<tr class='noRecords'><td>No records found</td></tr>");
} else {
$(".noRecords").remove();
}
});
});
Here's a working fiddle.
I will suggest you that instead of adding/removing an inline CSS add/remove a class with display none, so you can find how much elements has that class and compare it againist of how much cells you have, if number matches you will know that is not displaying any cell

jQuery - Disabling checkbox & adding attribute on click

I need checkboxes + table rows that share attributes to be enabled once the first checkbox has been ticked. (id for the table row + class for checkbox).
This is only half working
My problem is that if you have multiple boxes selected and uncheck just one, all of the checkboxes and table rows lose the disabled attribute.
https://jsfiddle.net/a1p7an7o/
HTML
<tr id="IN-HOUSE">
<input onchange="check();" class="IN-HOUSE" name="bill[]" type="checkbox">
<label for="Bill?">Bill?</label>
</td>
</tr>
Javascript
<script>
function check(){
$('input[name*=bill]').change(function() {
$t = $(this);
var $th = $(this).attr('class');
$c = $("tr[id!='"+$th+"']");
if ($(this).is(':checked')) {
$('input[name*=bill]').each(function() {
if ($(this).attr('class') != $th) {
$(this).not($t).prop('disabled', true);
$c.not($t).addClass( "disable" );
}
});
} else {
$('input[name*=bill]').each(function() {
if ($(this).attr('class') != $th) {
$(this).not($t).prop('disabled', false);
$("tr[id!='"+$th+"']").removeClass("disable");
}
});
}
});
}
</script>

jQuery find checkbox in first td

I have many tables and in that I want to do the following,
find a table which is present in class.
find first tr, first td in a table
check checkbox present first td in a table
if checkbox present in first td then add class.
Below is my code which is not working
function myFunction() {
debugger;
var FindClass = $("table.Panel");
debugger;
var FindClass = $(".Panel table.Table");
debugger;
debugger;
if (FindClass != null) {
$("#FindClass tr").find("td:first").tagname("input");
}
}
We can do this in 2 achieve this in 2 simple ways...
Find a table with the class selector. By conditional check we can add the class to the checkbox.
Implementing the complete code in a single line with out performing the conditional operations.
HTML
<table class="Panel">
<tr>
<td><input type="checkbox" /></td>
<td><p>Test</p></td>
</tr>
<tr>
<td>Second TD</td>
</tr>
</table>
jQuery (1st method)
if($('table.Panel').length > 0) {
var tblCheckbox = $('table.Panel tr:first td:first input[type=checkbox]');
if(tblCheckbox.length > 0) {
tblCheckbox.addClass('clstochkbox');
}
}
jQuery (1st method)
$('table.Panel tr:first td:first input[type=checkbox]').addClass('clstochkbox');
http://jsfiddle.net/64jv3z6d/
Check for .length property as jQuery objects are never null. And name it different.
var panelTable = $(".Panel table.Table");
if (panelTable.length) {
// panelTable has elements
}
You can do like this
var chk_box = $("table.Panel tr:first td:first")
.find('input type=["checkbox"]');
if(chk_box.length) {
$(chk_box.addClass('x')
}
We can do this in also this way.
<script type="text/javascript">
function myFunction() {
debugger;
var headerRow = $("table.Panel tr:first th:first");
debugger;
if (headerRow != null) {
var checkbox = headerRow.find("input[type=checkbox]");
if (checkbox[0].type == 'checkbox') {
headerRow.addClass('checkboxColumns');
alert('checkbox Found')
} else {
alert('not found')
}
}
}
</script>

Looping through table and changing <tr> background depending on which checkboxes are checked

I have a table with table rows, which contain 2 checkboxes in them, one is under the class of student_late, and the other is under the class of student_present.
I want it to do the following:
If the student_present checkbox only is checked, make the tablerow green by adding the class "success".
If the student_present checkbox is checked as well as the student_late checkbox, make the tablerow yellow by adding the class "info".
If no checkbox is checked, make the tablerow red by adding the class "danger".
This is my current CoffeScript:
$(document).ready ->
return $("tr .student_present").each(->
if #checked
$(this).closest("tr").addClass "success"
else
$(this).closest("tr").addClass "danger"
)
$("tr .student_late").each ->
$(this).closest("tr").addClass "info" if #checked
Or for those who prefer JS:
$(document).ready(function() {
return $("tr .student_present").each(function() {
if (this.checked) {
return $(this).closest("tr").addClass("success");
} else {
return $(this).closest("tr").addClass("danger");
}
});
return $("tr .student_late").each(function() {
if (this.checked) {
return $(this).closest("tr").addClass("info");
}
});
});
You do not need to use return for document ready. Here is the code that you could use.
$(function() {
$('table tbody tr').each(function() {
var $row = $(this);
var late = $row.find('.student_late')[0].checked;
var present = $row.find('.student_present')[0].checked;
if(present && !late) {
$row.addClass('success');
} else if(present && late) {
$row.addClass('info');
} else if(!present && !late) {
$row.addClass('danger');
}
});
});
$(function() is just a shorthand for $(document).ready(function() . Here is JSfiddle of the code working. http://jsfiddle.net/5DUwr/
If you want it to update when you click a checkbox. Use this code
$(function() {
$('table tbody tr').each(function() {
var $row = $(this);
updateRow($row);
});
$('table tbody tr input[type="checkbox"]').click(function() {
var $row = $(this).parents('tr');
updateRow($row);
});
});
function updateRow($row) {
$row.removeClass('success danger info');
var late = $row.find('.student_late')[0].checked;
var present = $row.find('.student_present')[0].checked;
if(present && !late) {
$row.addClass('success');
} else if(present && late) {
$row.addClass('info');
} else if(!present && !late) {
$row.addClass('danger');
}
}
Here is the fiddle http://jsfiddle.net/5DUwr/4/
Not 100% sure what the problem is here, I've just replicated your code and it seems to work fine (obviously I don't have your HTML, though)... http://jsfiddle.net/VWcXW/
<table>
<tr>
<td><input type="checkbox" class="student_present"></input></td>
</tr>
<tr>
<td><input type="checkbox" class="student_present" checked="checked"></input></td>
</tr>
</table>
$(document).ready(function() {
return $("tr .student_present").each(function() {
if (this.checked) {
return $(this).closest("tr").addClass("success");
} else {
return $(this).closest("tr").addClass("error");
}
});
return $("tr .student_late").each(function() {
if (this.checked) {
return $(this).closest("tr").addClass("info");
}
});
});
It works fine for me:
http://jsfiddle.net/Ba5qg/
I mean, it's executed once !
It's not binding click event to change the background-color...
That you could change with:
$("tr .student_present").on('click', function () {
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('success');
[...]
}
});
Fiddle code:
HTML
<table>
<tr>
<td>Paul</td>
<td><input type='checkbox' name='student_present' class='student_present' checked /></td>
<td><input type='checkbox' name='student_late' class='student_late' /></td>
</tr>
<tr>
<td>John</td>
<td><input type='checkbox' name='student_present' class='student_present' /></td>
<td><input type='checkbox' name='student_late' class='student_late' checked /></td>
</tr>
</table>
CSS
.success {
background: green;
}
.error {
background: red;
}
.info {
background: yellow;
}
JS
You can remove your return statement here !
$(document).ready(function() {
$("tr .student_present").each(function() {
if (this.checked) {
return $(this).closest("tr").addClass("success");
} else {
return $(this).closest("tr").addClass("error");
}
});
$("tr .student_late").each(function() {
if (this.checked) {
return $(this).closest("tr").addClass("info");
}
});
});
you can add unique ids for your checkboxes i.e. 'chk_001' and eqivalent numbers in the ids of the tr/td tags.
Then looping through the checkboxes your can grab the rows you want to change.
When you use the same numbers in the tr/td ids (like tr_001 or td_001) you can set the desired classes/styles using getElementById wherever you find the checkbox checked.
I think this could be achieved easier(Working fiddle):
HTML
<table>
<tr>
<td><input class="student_present" type="checkbox" checked="checked">Present</td>
<td><input class="student_late" type="checkbox">Late</td>
</tr>
<tr>
<td><input class="student_present" type="checkbox">Present</td>
<td><input class="student_late" type="checkbox" checked="checked">Late</td>
</tr>
</table>
CSS
.success {
background: green;
}
.error {
background: red;
}
.info{
background: yellow;
}
JS
$(document).ready(function() {
$(".student_present").closest('tr').addClass('error');
$(".student_present:checked").closest('tr').toggleClass('success error');
$(".student_late:checked").closest('tr').addClass(function() {
if($('.student_present', $(this).closest('tr')).is(':checked')) return 'info';
else return '';
});
});

Categories