如何将所选复选框的值传递给javascript函数？

Question

我需要将所选复选框的值传递给javascript方法,但它不会检测复选框.

<form name="cat" method="POST" action="myaction">     
    <c:forEach items="${items}" var="item">
        <input type="checkbox" id="pro" name="pro" value="${item.id}"/>
    </c:forEach>
    ...
    <input type="button" value="getItem" onclick="getItem(this.form)"/> 
 </form>

使用Javascript

function getItem(frm) {

    alert("size:" + frm.pro.length);   <<< it returns size:unidentified
    var values = "";
    for (var i = 0; i < frm.pro.length; i++)
    {

        if (frm.pro[i].checked)
        {

                values = frm.pro[i].value + ",";

        }
    }
    alert(values);   << it is empty
    ....
    //pass values to the back-end

Answer 1

我认为你的做法是老式的.这是一个jQuery版本.

注意:您正在添加多个id ="pro",这是错误的删除它

首先添加id="form"到您的表单

在这里你可以找到一个小提琴.:d

http://jsfiddle.net/SXffG/3/

HTML:

<form id="form" name="cat" method="POST" action="myaction">     
        <input type="checkbox" name="pro" value="1"/>
            <input type="checkbox"  name="pro" value="2"/>
            <input type="checkbox"  name="pro" value="3"/>
            <input type="checkbox"  name="pro" value="4"/>
            <input type="checkbox"  name="pro" value="5"/>
            <input type="checkbox"  name="pro" value="6"/>
    <input type="button" class="getItem" value="getItem"/>
</form>
<div id="info">Click the button</div>

JavaScript的

var allVals = [];
$(function() {
   $('#form .getItem').click(function() { 
       allVals = []
     $('#form :checked').each(function() {
       allVals.push($(this).val());
     });
     //alert("Values " + allVals);
     $.ajax({  
         type: "POST",  
         url: "http://localhost:8080/example/ajaxSubmit.action",  
         data: "allVals=" + allVals,  
         success: function(response){  
             $('#info').html("OK! Data [" + allVals + "] Sent with Response:" + response);  
         },  
         error: function(e){  
             $('#info').html("OH NOES! Data[" + allVals +"] Not sent with Error:" + e);
         }  
     });
  });
});