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

时间:2014-04-10 00:07:03

标签: javascript jquery struts2

我需要将所选复选框的值传递给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

2 个答案:

答案 0 :(得分:6)

我认为你的方法是老式的。这是一个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);
         }  
     });
  });
});

答案 1 :(得分:0)

var check = document.getElementsByName("pro");  
var textArray = [];                            
   for(var c = 0; c < check.length;c++){
      if(check[c].checked){
         textArray .push(check[c].value);                                 
      }
  }
  textArray = textArray .join("~"); 

您将获得分开的数据。希望这会对你有所帮助。