Develop Reference

Option to check all boxes and hide table row elements

I've created a simple table where I have the option to select all checkboxes. I would like to have the option to hide individual rows, or hide all the rows when using the select all function. I've managed to get the checkboxes working, but I can't figure out why the table isn't responding to the action. I appreciate any help or insight.
The full code is in this Fiddle. Here is a glance at the jquery and javascript:
<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
</script>
<script>
function checkedAll() {
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for (var i = elements.length; i--;) {
if (elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
}
}
}
</script>

<script>
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
var checked = $(this)[0].checked;
$("tr").each(function() {
if($(this).find("td:eq(0)").html() === inputValue.toString()) { // this checks the first cell of each row of the table for a match
if(checked) { //instead of just toggling, you check the status and then show/hide
$(this).hide();
} else {
$(this).show();
}
}
});
});
});
</script>
<script>
function checkedAll() {
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for (var i = elements.length; i--;) {
if (elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
$(elements[i]).trigger("change"); // this triggers the function above
}
}
}
</script>
This should work for you. The .each loop will iterate through the rows and hide the ones where the first td is the value to be hidden.

Adding select/deselect all to dynamic tabular form

I have a form which contains buttons to add and delete rows. My javascript function to check all checkboxes works for the first row, but once I add more rows to the form, the first row is still the only one that gets checked.
Any tips?
Here is my javascript function:
<code>
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var on = false;
if(masterCheck.checked==true) {
document.getElementById('checkbox').checked=true;
} else {
document.getElementById('checkbox').checked=false;
}
}
</code>
And here is the form:
http://crimsonroot.com/files/freelance/new.html
Any help is appreciated!

I found out what was wrong! #Mohammed your answer really helped. There were just one or two syntax errors that I found. In order to check and uncheck all of the boxes, I needed to add a boolean variable as an input to the function as follows:
//checks all rows
function checkAll(bool) {
var masterCheck = document.getElementById('masterCheck');
var allcheck = document.getElementsByClassName('checkbox');
var on = false;
for (var i = 0; i < allcheck.length; i++) {
if (masterCheck.checked == true) {
allcheck[i].checked = true;
} else {
allcheck[i].checked = false;
}
}
}
For some reason, this was the final piece to the puzzle. Thanks for all of the help!

You should try something like this.
$("#masterCheck").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});

Since document.getElementById() returns first element, because id cannot be used more than one. To make it usable, add a class checkbox and try the following code:
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var allcheck = getElementsByClassName('checkbox');
var on = false;
for (var i = 0; i < allcheck.length; i++) {
if (masterCheck.checked == true) {
allchecked[i].checked = true;
} else {
allchecked[i].checked = false;
}
}
}

kendo ui grid: Compare data in multiple selected rows?

Ok, rephrasing the question here, it seems the articulation was lacking.
I have a kendo ui grid, and when I make multiple selections (2 or more at a time) of rows, I need to compare values of a specific column in all the selected rows to determine if they are exactly equal(same) or not. Here's is my kendo 'change: ' function, the dataItem in question we'll call 'fancyNumber':
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
function allValuesSame() {
for (var i = 1; i < selectedRows.length; i++)
{
if(this[i] != this[0])
return false;
}
return true;
}
if (selected.length > 1){
var selectedRows = $("#myTable").data("kendoGrid").select();
var fancyNumberText = this.dataItem(this.select()).fancyNumber
if (allValuesSame(fancyNumberText) === true) {
alert(fancyNumberText); //just testing to see what I get
}
return allValuesSame(fancyNumberText);
}
if (selected.length == 0) {
$('#fancyButton').attr('disabled', 'disabled');
} else if (selected.length == 1) {
$('#fancyButton').attr('disabled', false);
} else if (selected.length > 1 && allValuesSame == true) {
$('#fancyButton').attr('disabled', false);
}
},
Clearly, this isn't correct; how do I do this?

You can use the .dataSource property to get the model that your grid is bound to and make the comparison there.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource
Say your grid has an Id of myDataGrid, you would use:
var gridModel = $("#myDataGrid").data("kendoGrid").dataSource.data();
// Sample comparison
if (gridModel[3].someField === gridModel[5].someField) {
// Do something with your buttons
}

You need to set up the grid with the following...
.Selectable(sel => sel.Mode(GridSelectionMode.Multiple))
.Events(e => e.Change("onChange"))
Once you have these in place, you can select individual lines and you have an event which is called on selection onChange
In your script, wire up this funciton...
function onChange() {
//you can get the selected row like this
var selected = $.map(this.select(), function(item) {
return item.getAttribute('data-uid');
});
//if selected count > 1 then check logic and enable/disable button
EnableDisableButton(true, "#myButton");//assuming condition was good
}
You need to set up the onChange to record the rows values from each selection, maybe using an array and then comparing the values in the array.
function EnableDisableButton(isToBeEnabled, buttonName) {
if (isToBeEnabled)
$(buttonName).removeAttr("disabled").removeClass("k-state-disabled");
else
$(buttonName).prop("disabled", true).addClass("k-state-disabled");
}

Reset button for JQuery table row filter

I have a table on my page, and a filtering text box above it that works fantastic, using the following JQuery:
$("#searchInputCompanies").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#cBody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function(i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.text().toLowerCase().indexOf(data[d].toLowerCase()) > -1) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
$('#selectAllCompanies').prop('checked', '');
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
How can I set up a Reset Filter button for this?

Uhh, this is quite a bad implementation :(
First, you need to change the event for $("#searchInputCompanies") to make it all a bit easier. So, it will become $("#searchInputCompanies").on("input", function() {...
$("#resetAction").on("whatEventYouWant", function() {
$("#searchInputCompanies").val("").trigger("input");
});
This will trigger input event on $("#searchInputCompanies") and because the text box is empty all rows will become visible.

Is there a way to check a form before submitting it to see if ANY of the checkboxes have been checked?

Is there a way to check a form before submitting it to see if ANY of the checkboxes have been checked in Javascript?
Something like...
function checkboxcheck(){
/*something in here to check name="brands[]" checkbox array?*/
}
Basically I just want it to alert me if 0 checkboxes were selected. 1 or more is required.
I would call this function on submit.
Thanks much!!

You could do something like this:
function anyCheckboxesChecked() {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type === "checkbox" && inputs[i].checked)
return true;
}
return false;
}
Then you could call that function from your "submit" handler"
if (!anyCheckboxesChecked()) {
alert("Please check one of the appealing checkboxes on the page");
return false;
}
If your page is more complicated than what this implies (like, if there are multiple forms), then you'd find the appropriate form first and call .getElementsByTagName() from that point instead of from document.

How about:
function checkboxcheck(name) {
var els = document.getElementsByName(name);
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
return true;
}
}
return false;
}
using getElementsByName().
Usage:
var valid = checkboxcheck("brands[]");
Here's an example: http://jsfiddle.net/andrewwhitaker/2saJp/1/