How to check if a check box is active using Java Script?

brgdotnet
brgdotnet used Ask the Experts™
on
I am able to check  all check boxes in my GridView control using Java script. When I press a button it calls my  java script "checkAll".
It works great however I need to change the code so that it first checks if a check box control is active before setting it to a value of true.
How can I do that? There is no "Active" or "Enabled" property, so I can't take that approach :  inputList[i].checked.enabled

So how can I check if a check box is enabled using Java Script



<script type = "text/javascript">
function checkAll(objRef)
{
    var GridView = objRef.parentNode.parentNode.parentNode;
    var inputList = GridView.getElementsByTagName("input");
    for (var i=0;i<inputList.length;i++)
    {
        //Get the Cell To find out ColumnIndex
        var row = inputList[i].parentNode.parentNode;
        if(inputList[i].type == "checkbox")
        {
                inputList[i].checked=true;
        }

    }

}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
Commented:
I set the atrr value and then via for loop I check wich checkbox has value=active and attr checked==false.

HTML:

  <input type="checkbox" checked="" value="active" />
  <input type="checkbox" checked="" value=""/>
  <input type="checkbox" checked="" value=""/>
  <input type="checkbox" checked="" value="active"/>
  <input type="checkbox" checked="" value=""/>
  <input type="checkbox" checked="" value=""/>
  <br/>
  <button id="myButton">Click Me</button>

Open in new window


Javascript:

var chkBoxes=document.getElementsByTagName('input');
var myButton=document.getElementById('myButton');

 myButton.addEventListener('click', function(){
  for (var i=0;i<=chkBoxes.length;i++){
  if(chkBoxes[i].value=='active' && chkBoxes[i].checked===false ){
   chkBoxes[i].checked=true;
  }
}
});

Open in new window



Alternative instead of value attr you can use the data atrr at HTML 5. (data attr MDN)
Maheshwar RSoftware Developer

Commented:
Hi,

i'm using the following code to enable textbox if the checkbox value is checked, you can change the code to suit your needs

    $("[id*=chkRow]").bind("click", function () {
                //Find and reference the GridView.
                var grid = $(this).closest("table");
 
                //Find and reference the Header CheckBox.
                var chkHeader = $("[id*=chkHeader]", grid);
 
                //If the CheckBox is Checked then enable the TextBoxes in thr Row.
                if (!$(this).is(":checked")) {
                    var td = $("td", $(this).closest("tr"));
                    td.css({ "background-color": "#FFF" });
                    $("input[type=text]", td).attr("disabled", "disabled");
                } else {
                    var td = $("td", $(this).closest("tr"));
                    td.css({ "background-color": "#D8EBF2" });
                    $("input[type=text]", td).removeAttr("disabled");
                } 
                //Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
                if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
                    chkHeader.attr("checked", "checked");
                } else {
                    chkHeader.removeAttr("checked");
                }
            });

Open in new window


chkRow is the checkbox id which is in grid template field

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial