Question

function getParam() {
    alert($("#paramNameVal").val());
    //  $paramName=$('#paramName');
    alert("Hi");
    var checkboxes;
    $("D1").change(function() {
        $("checkboxes").append("D1");
    });
    alert($("#checkboxes").val());
    var interval = document.getElementById('time').value;
    $("#showParam1").html("");
    $.ajax({
        type: "POST",
        url: "dojo_Getgrid.action",
        data: {
            Interval: interval,
            Userlist: $("#paramNameVal").val(),
            checkID: checkboxes
        },
        // data: { ,},
        //data:$("#paramName").val(), 
        success: function(response) {
            console.log(response);
            alert(response);
            $("#showParam1").html(response);
            // document.getElementById("showParam").style.display='block';
        }
    });
}

您好。我想做的是，我在屏幕上有7个复选框，表示一周中的几天，点击该按钮时有一个保存按钮，我想发送所有的ID /名称那些已被用户检查的复选框以及对java类的ajax调用，这样我就可以知道用户检查相应复选框的所有日期。

直到现在我使用.change函数，如果该复选框的值被更改，则表示复选框id的常量保存在变量名复选框中，ultimatley将此变量复选框发送到java类以及ajax调用

$("D1").change(function() {
    $("checkboxes").append("D1");
});

但是当我用alert($("#checkboxes").val());知道，那个ultimatley存储在那个变量复选框中时，它显示未定义为和警告..

这是我的JSP页面： -

<%@ page language="java" contentType="text/html;  charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
<head>
<title><s:label key="Master.Title" /></title>

<script type="text/javascript" src="jscript/selectivizr-min.js"></script>
 <script type="text/javascript" src="jscript/selectivizr.js"></script>

<sj:head debug="true" jqueryui="true" />

<s:set name="theme" value="'simple'" scope="page" />
<link rel="stylesheet" href="JQuery/themes/start/jquery.ui.all.css">
<link rel="stylesheet" href="JQuery/custom.css">
<link rel="stylesheet" href="css/screens.css">
<%-- <script type="text/javascript" src="css/screens.js"></script> --%>
<link rel="stylesheet"
    href="../JQuery/jquery.jqGrid-4.1.2/css/ui.jqgrid.css">
<script>

function addMore()
{
    //alert("addMore");
    var paramName=document.getElementById("descr_1").value;
     document.parameterGrid.action = "addNewParameter.action?descr="+paramName;
      document.parameterGrid.submit();
}
function activateParam()
{
    //alert("Activate Button");
    var size=document.getElementById('gridSize').value;
    //alert(size);

     var checkboxValue=0;
     for(var i=1; i<=size; i++) {
         //alert(document.getElementById("visible_"+i).checked);
            if(document.getElementById("visible_"+i).checked==true)
                {
                checkboxValue=1;
                }
     }
     if(checkboxValue == 0)
         {
         $('#reqId').html("<s:text name='alert.atleastoneval'/>");
            $('#alertToUser').dialog('open');
             return false;
         //alert("Please Select atleast one value"); 

         }

    for(var i=1; i<=size; i++) {

    //alert(document.getElementById("visible_"+i).checked);
    if(document.getElementById("visible_"+i).checked==true)
        {
        //alert("checked"+document.getElementById("paramVal_"+i));
        paramval=document.getElementById("paramVal_"+i).value;
        //alert(paramval);
        if(i!=1)
        paramid=paramval+','+paramid;
        else
            paramid=paramval;
        //alert(paramid);
        }
    }
    document.parameterGrid.action = "activateParameter.action?paramName="+paramid;
    document.parameterGrid.submit();
}


var paramid='';
var paramval=0;
function deactivateParam()
{
//alert("Dectivate Button");
    var size=document.getElementById('gridSize').value;
    //alert(size);

     var checkboxValue=0;
     for(var i=1; i<=size; i++) {
         //alert(document.getElementById("visible_"+i).checked);
            if(document.getElementById("visible_"+i).checked==true)
                {
                checkboxValue=1;
                }
     }
     if(checkboxValue == 0)
         {

         alert("<s:text name='alert.pleaseselectonevalue'/>"); 
         return false;
         }

    for(var i=1; i<=size; i++) {
 //alert(document.getElementById("visible_"+i).checked);
    if(document.getElementById("visible_"+i).checked==true)
        {
        //alert("checked"+document.getElementById("paramVal_"+i));
        paramval=document.getElementById("paramVal_"+i).value;
        //alert(paramval);
        if(i!=1)
        paramid=paramval+','+paramid;
        else
            paramid=paramval;
        //alert(paramid);
        }

    }


    document.parameterGrid.action = "deactivateParameter.action?paramName="+paramid;
    document.parameterGrid.submit();
   }
//For Displaying TimeSlots 
/* function getSlots()
{
    alert ("hi");
    var interval=document.getElementById('time').value;
alert(interval);
    $.ajax({  
          type: "POST",  
          url: "dojo_Getintervals.action",  
          // data: {paramName: $paramName.val() },
          data:{Interval:interval} ,
          success: function( response ) {
                console.log( response );
              // alert(response.finalSlots);
           //     $("#showParam").html(response);
           //     document.getElementById("showParam").style.display='block';
           var result=response.finalSlots;
           var $select = $('#t1');
            $select.find('option').remove();
            $('<option>').val('0').text('Select').appendTo($select);
            $.each(result, function(i, field) {
                $('<option>').val(i).text(field).appendTo($select);
            });
                document.parameterGrid.t1.disabled = false;
              }          
          });
} */
/* function gettoSlots()
{
    alert ("hi");
    var interval=document.getElementById('time').value;
    var screenval=$('#t1 option:selected').text();
    alert(screenval);
    $.ajax({  
          type: "POST",  
          url: "dojo_Gettovalue.action",  
          // data: {paramName: $paramName.val() },
          data:{Interval:interval , val: screenval} ,
          success: function( response ) {
                console.log( response );
              // alert(response.finalSlots);
           //     $("#showParam").html(response);
           //     document.getElementById("showParam").style.display='block';
           var result=response.toMap;
           var $select = $('#t2');
            $select.find('option').remove();
            $('<option>').val('0').text('Select').appendTo($select);
            $.each(result, function(i, field) {
                $('<option>').val(i).text(field).appendTo($select);
            });
                document.parameterGrid.t2.disabled = false;
              }          
          }); 
}*/
function check()
{


      for(var i=1; i<=7; i++) {

          if(document.getElementById("All").checked==true)
              {
              document.getElementById("D"+i).checked=true;
              }else
                document.getElementById("D"+i).checked=false;

         }

}
function getParam()
{
    alert ($("#paramNameVal").val());
    //  $paramName=$('#paramName');
    alert("Hi");
   var checkboxes; 
   $("D1").change(function(){
           $("checkboxes").append("D1");
     });
   alert($("#checkboxes").val());
    var interval=document.getElementById('time').value;
    $("#showParam1").html("");
    $.ajax({  
          type: "POST",  
          url: "dojo_Getgrid.action",  
          data:{Interval:interval ,Userlist : $("#paramNameVal").val(),checkID : checkboxes },
          // data: { ,},
          //data:$("#paramName").val(), 
          success: function( response ) {
                console.log( response );
                alert(response);
                $("#showParam1").html(response);
               // document.getElementById("showParam").style.display='block';
              }          
          });
}

</script>
<style>
.grid-view-table {
    width: 100%;
    font-family: Verdana;
    font-size: 12px;
    border-collapse: collapse;
}

.grid-view-table tr:nth-child(odd) {
    background-color: #ECF1F7;
    height: 23px;
}

.grid-view-table tr:nth-child(1) 
{
    background-color: #ECF1F7;
    height: 1px;
    text-align: center;
}
/* .grid-view-table tr:hover
{
    background: url("images/ui-bg_glass_75_79c9ec_1x400.png") repeat-x scroll 50% 50% rgb(121, 201, 236);
    border: 1px solid rgb(68, 141, 174);
    color: rgb(2, 104, 144);
    font-weight: normal;
} */
.grid-view-table .selected-row {
    background: url("images/ui-bg_glass_55_f8da4e_1x400.png") repeat-x
        scroll 50% 50% rgb(248, 218, 78);
    border: 1px solid rgb(252, 209, 19);
    color: rgb(145, 86, 8);
}
/*.grid-view-table tr th{
    background: url("images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% rgb(33, 145, 192);
    border: 1px solid rgb(66, 151, 215);
    /*border: 1px solid black;*/
/* color: rgb(234, 245, 247);
    font-weight: bold;
}*/
.grid-view-table tr td {
    border: 1px solid rgb(166, 201, 226);
    padding: 1px 2px 1px 2px;
}
/*.grid-view-table tr:nth-child(2){
    background: url("images/ui-bg_glass_45_0078ae_1x400.png") repeat-x scroll 50% 50% rgb(0, 120, 174);
    border: 1px solid rgb(119, 213, 247);
    color: rgb(255, 255, 255);
    font-weight: normal;
    text-align:center;
    font-weight:bold;
}*/
.header-background {
    background: url("images/ui-bg_glass_45_0078ae_1x400.png") repeat-x
        scroll 50% 50% rgb(0, 120, 174);
    border: 0px solid rgb(119, 213, 247);
    /*border-bottom: 1px solid black;
    background: -moz-linear-gradient(center top, #0078AE 50%, #006695 50%);*/
    color: white;
    text-align: center;
    font-family: "verdana";
}

/* above this is decorative, not part of the test */
.fixed-table-container {
    width: 99%;
    height: 240px;
    border: 1px solid #2A95C2;
    margin: 10px auto;
    background-color: white;
    /* above is decorative or flexible */
    position: relative; /* could be absolute or relative */
    padding-top: 20px; /* height of header */
    text-align: center;
}

.fixed-table-container-inner {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    text-align: center;
}

.header-background {
    height: 20px; /* height of header */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
}

.th-inner {
    position: absolute;
    top: 0;
    line-height: 20px; /* height of header */
    /*border-left: 1px solid black;*/
    font-family: verdana;
    font-weight: bold;
    color: white;
    font-size: 12px;
    width: 20%;
}
</style>
</head>
<body>
<!-- <div class="fixed-table-container"></div> -->
        <!-- <div class="header-background"></div> -->
        <!--  <div class="fixed-table-container-inner">  -->

            <s:form name="parameterGrid" theme="simple" >
             <fieldset > 
             <table style=" margin: 0px;" border="0"
                        class="table-form">

                    <tr >
                            <td align="justify"><s:label key="Everyday"></s:label></td>
                            <td align="justify"><s:checkbox name="All" id="All" theme="simple" onclick="check();"></s:checkbox></td>
                    </tr>
                    <tr>        
                            <td ><s:label key="Sunday"></s:label></td>
                            <td ><s:checkbox name="D1" id="D1" theme="simple"></s:checkbox></td>
                            <td ><s:label key="Monday"></s:label></td>
                            <td ><s:checkbox name="D2" id="D2" theme="simple" ></s:checkbox></td>
                            <td><s:label key="Tuesday"></s:label></td>
                            <td ><s:checkbox name="D3" id="D3" theme="simple"></s:checkbox></td>
                            <td><s:label key="Wednesday"></s:label></td>
                            <td ><s:checkbox name="D4" id="D4" theme="simple"></s:checkbox></td>
                            <td><s:label key="Thursday"></s:label></td>
                            <td ><s:checkbox name="D5" id="D5" theme="simple"></s:checkbox></td>
                            <td><s:label key="Friday"></s:label></td>
                            <td ><s:checkbox name="D6" id="D6" theme="simple"></s:checkbox></td>
                            <td><s:label key="Saturday"></s:label></td>
                            <td ><s:checkbox name="D7" id="D7" theme="simple"></s:checkbox></td>


                        </tr>
                        </table>

             <table style=" margin: 0px;" border="0"
                         >          
                         <tr>
                         <s:hidden name="paramNameVal" id="paramNameVal" value="%{Users}" />
                        <td ><s:label key="Time Interval" /></td>
                            <td style="text-align: left;" ><s:select name="time" id="time"
                                    list="timeMap" listKey="value" listValue="key" headerKey=""
                                    headerValue="Select" maxlength="25" cssClass="selectbx" onchange="getSlots();" /></td>
                                    <%--  <td><s:label key="From" /></td> --%>
                    <%--        <td style="text-align: right;"><s:select name="t1" id="t1"
                                    list="finalSlots" listKey="key" listValue="value" headerKey=""
                                    headerValue="Select" maxlength="25" cssClass="selectbx" onchange="gettoSlots();" disabled="true"/></td>
                                     <td><s:label key="To" /></td>  
                            <td style="text-align: right;"><s:select name="t2" id="t2"
                                    list="toMap" listKey="key" listValue="value" headerKey=""
                                    headerValue="Select" maxlength="25" cssClass="selectbx" disabled="true"/></td> --%> 
                        <%--  <td> <s:label
                         key="Break"></s:label></td>
                         <td ><s:textfield name="employeeCode" id="employeeCode" maxlength="50" /></td> --%>

                        </tr>
            </table>
            <div align = "right">                       
                    <span id="addNew">  
                    <sj:a align="right" name="add" button="true" 
                                            cssClass="mediumBtn" 
                            formIds="dummy" id="add" onclick= "getParam();"><s:label key="Schedule" /></sj:a>    
                  </span>

          </div>

                    </fieldset>


                    <div id="showParam1"></div>
                <%-- <s:include value="/pages/TimeBound/timeboundGrid.jsp"></s:include> --%>




                    </s:form>



                    <!-- </div> -->

                    <br> 



</body>
</html>

Answer 1

您无需将checkbox的值保存到变量（在本例中为D1）。您可以在单击按钮时找到所选复选框，并通过ajax将其发送到服务器

$('.submit').click(function(){
    var params = $('input:checked').serialize();
    $.ajax({
        type: "POST",
        url: "...",
        data: params,
        success: function(response) {...}
    });
    return false;
});

HTML

<input type="checkbox" value="D1" name="day" /> Sunday
<input type="checkbox" value="D2" name="day" /> Monday
<input type="checkbox" value="D3" name="day" /> Tuesday
...

在服务器端，您可以使用

获取数据

String[] day = request.getParamterValues("day");

Answer 2

将此添加到您的页面：

<div id="checkboxes" style="display: none;"></div>

你可以在你的jsp上使用class，对吗？所以你必须这样做：

<s:checkbox name="D1" id="D1" class="checkBox" value="D1" theme="simple"></s:checkbox>
<s:checkbox name="D2" id="D2" class="checkBox" value="D2" theme="simple"></s:checkbox>
...

现在使用jquery这样调用它：

$( ".checkBox" ).change(function() {
    var $input = $( this );
    $("#checkboxes").append($input.attr('ID')); //change this
}

Jquery正在检查每个.checkBox的更改，如果更改，jquery会将其值附加到#checkboxes

希望它会有所帮助，对不起我的英语。：d

从多个复选框中选中已选中的复选框

2 个答案: