I am using a Gridview with checkboxes in my application.
Here is the format:
In the gridview if header checkbox is checked then all subsequent chekboxes under that should also be checked or unchecked as the case of header chekbox.
for this I am using java script function as.
function SelectAllFirstRow(ChK, cellno)
{
var gv = document.getElementById("ggvPage");
for (var i = 1; i <= gv.rows.length - 1; i++) {
var chk1 = gv.rows(i).cells(cellno).firstChild;
chk1.checked = ChK.checked;
}
}
Here :
ggvPage is the Gridview.
Chk is the header Checkbox and cellno is like 1 for view,2 for Add and.........
It's working fine in IE but not in Firefox and chrome.
Please suggest some solution for fulfilling my need.
Waiting for valuable solutions,
Thanks a lot,
Supriya
Use function .each() in jQuery http://api.jquery.com/jQuery.each/
Use this javascript. It is just an example. You can modify it as per your requirement
function SelectAllFirstRow(ChKAdd)
{
if (ChKAdd.checked==false)
{
SelectCheck();
}
else
{
DeselectCheck()
}
}
function SelectCheck() {
var flag;
for (i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i];
if ((elm.type == 'checkbox') && (elm.name == 'chkSelectAdd') && (elm.checked == false)) {
elm.checked = true;
changeColor(elm);
flag = 1;
}
}
return false;
}
function DeselectCheck() {
for (i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i];
if ((elm.type == 'checkbox') && (elm.name == 'chkSelectAdd') && (elm.checked == true)) {
elm.checked = false;
changeColor(elm);
}
}
return false;
}
// changes the color of the selected row
function changeColor(chkBox) {
var rowVar = chkBox.parentNode.parentNode;
if (chkBox.checked) {
rowVar.style.backgroundColor = "#EDEDED";
}
else {
rowVar.style.backgroundColor = "#FFFFFF";
}
}
where chkAdd is the name of checkbox at header which is for Add and chkSelectAdd is the names of checkboxes in GridView under Add header.
In ItemTemplate of the GridView use like this
<ItemTemplate>
<input name="chkSelectAdd" type="checkbox" value='<%#DataBinder.Eval(Container.DataItem,"ID") %>'
onclick='javascript: changeColor(this)' />
</ItemTemplate>
Related
I want to put a condition to check if the checkbox is not selected. If so, there should be a prompt or alert that user must choose a checkbox.
function submit() {
var row_count = $('#adj_table_x >tbody >tr').length;
var grid = document.getElementById("adj_table_x");
var checkBoxes = grid.getElementsByTagName("INPUT");
// I want to put a condition here before the loop value will inserted
for (var i = 1; i <= row_count; i++) {
if (checkBoxes[i].checked) {
var row = checkBoxes[i].parentNode.parentNode;
var data = row.cells[1].innerHTML;
$.post('../controller/controller.php?action=submit', {
'data': data
}, function(response) {
console.log(response);
});
}
}
}
You can use the below selector
$("input:checked").length != $("input").length
You can tweak the code based on your requirement
You need to use pseudo selector 'checked' available in JQuery - Please see the link below for more info
https://api.jquery.com/checked-selector/
function submit (){
if($("#tableID input[type='checkbox']:checked").length !=
$("#tableID input[type='checkbox']").length){
alert("please check all values")
}
else{
//Put your code here
}
I think you want something like this, not really sure about your explanation, but see if it works for you.
function submit() {
var row_count = $('#adj_table_x >tbody >tr').length;
var grid = document.getElementById("adj_table_x");
var checkBoxes = grid.getElementsByTagName("INPUT");
// I want to put a condition here before the loop value will inserted
if(checkBoxes.prop('checked') == false){
alert('Please select checkbox');
return false;
}
for (var i = 1; i <= row_count; i++) {
if (checkBoxes[i].checked) {
var row = checkBoxes[i].parentNode.parentNode;
var data = row.cells[1].innerHTML;
$.post('../controller/controller.php?action=submit', {
'data': data
}, function(response) {
console.log(response);
});
}
}
}
I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>
Here is the issue: I am trying check and uncheck the check boxes by a group.
So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.
Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)
<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "")
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>
G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
clear group
</body>
</html>
When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
{
prodSel = a;
}else
{
if (prodSel != a)
{
alert ( "Please ensure that the groups are same for the items you select");
//alert(b);
document.getElementById(b).checked = false;
}
}
}
function ClearAllSelections()
{
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
inputs[i].checked = false;
}
}
prodSel=""; // Clear the variable; allow new selections
}
/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
var inputs = document.getElementsByTagName("input");
var cbs = [];
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type == "checkbox")
{
if (inputs[i].checked){clre= false;}
}
}
if (clre){
prodSel=""; // Clear the variable; allow new selections
alert(window.prodSel);
}
return clre;
}
</script>
I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}
If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.
$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});
I am trying to validate the checkbox which is one of the items in ListView control.
I have the button to check so I define the ClientClick function on the button and wrote JavaScript code.
But It didn't work. Display the lstViewtest object null.
function btnclick() {
var listview = document.getElementById('<%=
lstviewtest.FindControl("tableItem").ClientID %>');
for (var i = 0; i < listview.rows.length; i++) {
var inputs = listview.rows[i].getElementsByTagName('input');
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type === "checkbox" || inputs[j].type === "checkboxsend")
if (inputs[j].checked)
return true;
}
alert("Please select at least one");
return false;
}
}