CODEWITHSUNDEEP
javascriptjqueryforms
FlyingCat
FlyingCat

Reputation: 14250

How to get the selected checkbox value?

I am trying to get the selected checkboxes value and the hidden field value next to it when user submits the form. 

<form....>

<td><input type='checkbox' name='checkbox' value='1' ></input></td>
<input type='hidden' name='sid1' value='1'/>

<td><input type='checkbox' name='checkbox' value='1' ></input></td>
<input type='hidden' name='sid2' value='2'/>

<td><input type='checkbox' name='checkbox' value='1' ></input></td>
<input type='hidden' name='sid3' value='3'/>

I try:

$(document).ready(function(){
    if( $("input[name='checkbox']['checked']")) {
        $("input[name='checkbox']['checked']").each(function(){ 
            var test=$(this).val();
            alert(test);    
        })
    }
})

but it will gives me all the checkbox value even thought they were not checked. Any one could help me about this? Thanks a lot!

Upvotes: 2

Views: 34255

Answers (6)

hohner
hohner

Reputation: 11588

First of all, you're using the exact same name for your input elements. You should do something like: 

<input type='checkbox' name='checkbox[]' value='1'/>
<input type='checkbox' name='checkbox[]' value='2'/>
<input type='checkbox' name='checkbox[]' value='3'/>

To select all inputs which are checked, use:

$('input:checked').each(function() {
   // To pass this value to its nearby hidden input
   $(this).parent('td').next('input').val(this.value);
});

Upvotes: 2

Sutirth
Sutirth

Reputation: 952

//Script    
<script type="text/javascript">
            function getCheck() {
                alert(document.getElementById('<%= CheckBox1.ClientID %>').checked);
            }

    </script>
//Form 
        <form id="form1" runat="server">
        <div>

            <asp:CheckBox ID="CheckBox1" runat="server" />

            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="getCheck()" />

        </div>
        </form>

Upvotes: 0

Appz Venture
Appz Venture

Reputation: 939

Here it is: 

<HTML>
   <HEAD>
      <TITLE>Multiple-Select Check Boxes</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         function getSelected(opt) {
            var selected = new Array();
            var index = 0;
            for (var intLoop = 0; intLoop < opt.length; intLoop++) {
               if ((opt[intLoop].selected) ||
                   (opt[intLoop].checked)) {
                  index = selected.length;
                  selected[index] = new Object;
                  selected[index].value = opt[intLoop].value;
                  selected[index].index = intLoop;
               }
            }
            return selected;
         }

         function outputSelected(opt) {
            var sel = getSelected(opt);
            var strSel = "";
            for (var item in sel)       
               strSel += sel[item].value + "\n";
            alert("Selected Items:\n" + strSel);
         }
      </SCRIPT> 
   </HEAD>
   <BODY> 
      <FORM NAME="ColorSelector">
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="Red">Red
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="Navy" CHECKED>Navy
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="Black">Black
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="White" CHECKED>White
         <INPUT TYPE=BUTTON VALUE="Selected Check Box Items" 
            ONCLICK="outputSelected(this.form.color);">
         <P>
         <SELECT NAME="multistore" SIZE=3 MULTIPLE>
            <OPTION VALUE="Computer" SELECTED>Computer</OPTION>
            <OPTION VALUE="Bookstore">Book Store</OPTION>
            <OPTION VALUE="MailOrder" SELECTED>Mail Order</OPTION>
         </SELECT>
         <INPUT TYPE=BUTTON VALUE="Selected List Items" 
            ONCLICK="outputSelected(this.form.multistore.options)">
      </FORM>
   </BODY>
</HTML>

Upvotes: 4

The Alpha
The Alpha

Reputation: 146191

You may try this too

    $("input:checked").each(function(){ 
        var test=$(this).val();
        alert(test);    
    });

Fiddle here.

Upvotes: 1

Marc B
Marc B

Reputation: 360592

You want this instead:

$("input[type='checkbox']:checked")
                         ^^^^^^^^^---use this

Upvotes: 1

jbabey
jbabey

Reputation: 46647

['checked'] is not a valid selector, i think you are looking for :checked

$("input[name='checkbox']:checked")

Upvotes: 3

Related Questions