如何获取所选的复选框值?

时间:2012-03-07 16:00:38

标签: javascript jquery forms

我试图在用户提交表单时获取选中的复选框值和旁边的隐藏字段值。

<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'/>

我试试:

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

但它会给我所有的复选框值,即使他们没有被检查。任何人都可以帮我这个吗?非常感谢!

6 个答案:

答案 0 :(得分:4)

这是:

<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>

答案 1 :(得分:3)

['checked']不是有效的选择器,我认为您正在寻找:checked

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

答案 2 :(得分:2)

首先,您对输入元素使用完全相同的名称。你应该做点什么:

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

要选择所有已检查的输入,请使用:

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

答案 3 :(得分:1)

你想要这个:

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

答案 4 :(得分:1)

您也可以尝试这个

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

小提琴here

答案 5 :(得分:0)

//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>