从复选框中选择多个值

时间:2016-07-19 13:39:27

标签: javascript jquery checkboxlist

我有一个列表,在列表中,我可以选择多个值。所以我创建了一个复选框的下拉列表。

以下是HTML代码:

<form>
<div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
        <select>
            <option>Select an option</option>
        </select>
        <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
        @{ 
            if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0)
            {
                @:<h3>No records were processed.</h3>

            }
            else
            {
                foreach (var usr in ViewBag.DataActiveEmployee)
                    {                   
                        <label id="userName">@usr.EmployeeName</label>     
                        <input class="checked" type="checkbox" name="search_emp" id="search_emp" value=@usr.EmployeeName>
                @:
        }
        }
        }

    </div>
</div>

所以我可以选择多个值,然后将它传递给JS函数:

<div id="datePicker">
<link rel="stylesheet"  href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p><input type="text" id="datepicker"></p>
<script name="select_date" id="select_date">

  $(function () {
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          var userName = $(' .checked:checked').val();
         // var userName = $('search_emp').multiselect();
          console.log(userName);
          $.ajax('EmployeeDate', {
              data: {
                  strUserName: userName,
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
  </script>
  <button class="action" type="button" id="button_select">@Resources.Resources.ButtonFind</button>

我正在使用这一行:

  

var userName = $(&#39; .checked:checked&#39;)。val();

获得一个值。我的问题是,我怎样才能获得多个价值?

提前致谢!

1 个答案:

答案 0 :(得分:1)

它将所有这些值作为数组返回,您只需循环遍历它们。

使用.each()函数