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

【问题标题】：Selecting checked checkboxes out of multiple checkboxes从多个复选框中选择选中的复选框
【发布时间】：2014-10-07 18:41:05
【问题描述】： 
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/name那些已经被用户选中的复选框以及对 java 类的 ajax 调用，这样我就可以知道用户选中相应复选框的所有日子。

到目前为止，我一直使用 .change 函数，如果该复选框的值发生更改，则表示复选框 id 的常量将保存在变量名复选框中，最后将此变量复选框与 ajax 调用一起发送到 java 类

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

但是当我使用alert($("#checkboxes").val()); 知道时，该变量复选框中存储的 ultimatley 是什么，它显示为 undefined as 和 alert ..

这是我的 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>

【问题讨论】：

  • 什么"D1"？是ID还是类名？它在哪里？也显示您的 HTML。
  • 其实是checkbox的id，但是当我使用$("checkboxes").append("D1");我只是想将字符串 D1 存储在变量复选框中，这里我不是指复选框的 id
  • 那么你需要在$("D1")中使用#D1
  • 实际上这段 $("D1").change(function() 代码正在工作，它检查复选框的值是否已更改，但如果复选框的值与id D1 被更改，然后字符串 'D1' 应该存储在变量复选框中，例如 .. 如果复选框 1 = 星期日，复选框 2 = 星期一，复选框 3 = 星期二被选中，那么变量复选框应该包含 = D1,D2,D3。这应该作为字符串到 java 类..希望我这次解释得更好
  • 使用三元运算符$(selector).is(':checked') 勾选则返回true，不勾选则返回false，然后创建函数对其进行勾选，并返回其值。

标签： javascript jquery ajax checkbox


【解决方案1】：

您无需将复选框的值保存到变量（在本例中为 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");

【讨论】：

  • 您好，感谢您的回复，感谢您的帮助。但是我必须在 jsp 中使用 标签，而不是基本的 HTML 标签，所以我不能使用 type 属性，因此我该如何序列化
  • 您可以使用 代替我的 HTML。我的 HTML 也是这样
  • 但是，正如您在代码中提到的那样，在序列化时我将如何参考 - var params = $('input:checked').serialize();通过使用 input:checked 。
  • 无需更改。尽管您在代码中编写了 ，但它会在浏览器上打印 。
【解决方案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

【讨论】：

  • function getParam() { alert ($("#paramNameVal").val()); // $paramName=$('#paramName');警报（“嗨”）；变量复选框； $( ".checkBox" ).change(function() { var $input = $( this ); $("checkboxes").append($input.val()); });我完全按照你说的做了，，但是警报仍然显示未定义，请帮助
  • 编译后能不能给我看看你的&lt;s:checkbox ... /s:checkbox&gt;源代码？
  • 对不起，我的朋友，但它仍然不起作用，，，我什至尝试使用 fieldalue 属性而不是 value 但什么也没有，警报仍然弹出，但它什么也没显示
  • 试试.append($input.attr('ID'));
  • $("#checkboxes").append($input.attr('ID').val);这个呢
猜你喜欢
  • 2012-12-22
  • 1970-01-01
  • 2015-01-24
  • 2019-11-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-06
  • 2014-12-10
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode