JavaScript - how to get Check Box Values using JAvaScript

Asked By Anto Bilson on 18-Jul-11 09:51 AM

hi friends...
i've multiple checkboxes .. when i check the checkboxes i want display the values and text of checkbox...
pls give me solution

Riley K replied to Anto Bilson on 18-Jul-11 09:57 AM

Use this code

$(":checkbox").each(function() {
  if (this.checked) {
    alert(this.value);
  }
});

Jitendra Faye replied to Anto Bilson on 18-Jul-11 09:58 AM

Use this code-

<script>
function funGetValue(value)
{
    var val= value;
    alert(val);
    document.getElementById("txt").value=val;
}
</script>

   <input type="checkbox" value="ckh1" onclick="funGetValue(this.value)">
   <input type="checkbox" value="ck2" onclick="funGetValue(this.value)>
   <input type="checkbox" value="ck3" onclick="funGetValue(this.value)>

<input type="Text" id="txt" >

Try this code and let me know.

Anto Bilson replied to Anto Bilson on 18-Jul-11 10:14 AM

var chklist=gvOperator.getElementsByTagName('input');
    for(var i=0;i<chklist.length;i++)
    {
      if(chklist[i].checked==true)
      {
      var ChkValues=chklist[i].parentNode.parentNode; // First ParentNode to find Table then second ParentNode to find TD Tag it's goes on
      alert(ChkValues.cells[1].innerHTML); // get check box value
     alert(ChkValues.cells[2].innerHTML); // get checkbox text
      }
    }

because i've 2 fields in my gridview (Id and Text Only)...

dipa ahuja replied to Anto Bilson on 18-Jul-11 11:25 AM

 <script type="text/javascript">
    var atLeast = 1
    function Validate() {
      var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
      var checkbox = CHK.getElementsByTagName("input");
      var label = CHK.getElementsByTagName("label");
      var counter = 0;
      //validation to check atleast one item is selected
      for (var i = 0; i < checkbox.length; i++) {
        var checkitem = checkbox[i];
        if (checkitem.checked) {
        //Give the selected Checkbox value
          alert("Selected item is" + label[i].innerHTML);
          counter++;
        }
      }
      if (atLeast > counter) {
        alert("Please select atleast " + atLeast + " item(s)");
        return false;
      }
      return true;
    }
    </script>

 <asp:Button ID="Button3" runat="server" Text="Button" OnClientClick="return Validate();" />
  <asp:CheckBoxList AutoPostBack="true" ID="CheckBoxList1" runat="server">
    <asp:ListItem>ASP./net</asp:ListItem>
    <asp:ListItem>C#</asp:ListItem>
  </asp:CheckBoxList>

Radhika roy replied to Anto Bilson on 18-Jul-11 01:21 PM

Use this code-

<script>
function funcheck()
{
   var chk= document.getElementById("chk1");
   if(chk.checked)
    {
   document.getElementById("txt").value=ckh1.value;
   }
}
</script>

   <input type="checkbox" value="ckh1" onclick="funcheck()">
   <input type="Text" id="txt" >

Try this code and let me know.

Hope this will help you.

Reena Jain replied to Anto Bilson on 18-Jul-11 02:21 PM

Hi,

You can use GetElementsByTagName of javascript DOM method to get the controls from tag name, here input is the tag name so it goes like following

<script>

function GetChecked()

{

var container = document.getElementById('<% rptCat.ClientID %>');

var totalInputs = container.getElementsByTagName('input');

for(var i = 0;i< totalInputs.Length;i++)

{

if(totalInputs[i].type.toLowerCase()=='checkbox' && totalInputs[i].checked)

{

id += totalInputs[i].id;

}

</script>

this way you can get them

Devil Scorpio replied to Anto Bilson on 18-Jul-11 04:31 PM

Hi,

The example is showing how to get value from separate name checkbox in JavaScript.

<html>
<head>
<title>JavaScript select checkbox</title>
<script>
function selectCheckBox()
{
   alert(document.frm.id1.value)
   alert(document.frm.id2.value)
   alert(document.frm.id3.value)
}
</script>
</head>

<body>
<form name="frm">
<input type="checkbox" name="id1" value="1">
<input type="checkbox" name="id2" value="2">
<input type="checkbox" name="id3" value="3">

<input type="button" name="goto" onClick="selectCheckBox()" value="Check">
</form>
</body>
</html>