如何在没有select标签的情况下获取多个值

时间:2016-12-09 11:27:37

标签: jquery twitter-bootstrap

我想要多个复选框值,我尝试了一点我无法理解为什么这里意味着选择和选项不存在,我试图这样做但我无法获得值



<div class="dropdown-menu dropdown-menu" id="property_type2" name="property_type2" role="menu" style="color:#333;width:315px;height: 102px;border-radius:0px;" >
	<div class="chkbox" style="padding-left:5px;">
		<label class="checkbox-inline checkbox-success">
		  <input type="checkbox" id="Check1" value="flat"> Flat
		</label>
		
		<label class="checkbox-inline">
		  <input type="checkbox" id="Check2" value="villa"> House/Villa
		</label>
		
		<label class="checkbox-inline">
		  <input type="checkbox" id="Check3" value="plot"> Plot
		</label>
		
	</div>
</div>

     var foo = []; 
		$('.chkbox :selected').each(function(i, selected){ 
		  foo[i] = $(selected).text(); 
		});
       console.log(foo);
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:3)

这就是你要找的东西 - https://jsfiddle.net/sekrars9/

$("#btnGetValues").click(function() {
    
      var foo = [];
      $('input[type="checkbox"]:checked').each(function() {
        foo.push($(this).val());
      });
      alert(foo.join(","));
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu" id="property_type2" name="property_type2" role="menu" style="color:#333;width:315px;height: 102px;border-radius:0px;">
      <div class="chkbox" style="padding-left:5px;">
        <label class="checkbox-inline checkbox-success">
          <input type="checkbox" id="Check1" value="flat"> Flat
        </label>
    
        <label class="checkbox-inline">
          <input type="checkbox" id="Check2" value="villa"> House/Villa
        </label>
    
        <label class="checkbox-inline">
          <input type="checkbox" id="Check3" value="plot"> Plot
        </label>
        <input type="button" id="btnGetValues" value="Get Values">
      </div>
    </div>

答案 1 :(得分:0)

以下HTML将根据您的需要运行:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
       $.each($('input'),function(){

        if($(this).is(':checked'))
            console.log($(this).val());
       });
});
</script>
</head>

<body>
<div class="dropdown-menu dropdown-menu" id="property_type2" name="property_type2" role="menu" style="color:#333;width:315px;height: 102px;border-radius:0px;" >
    <div class="chkbox" style="padding-left:5px;">
        <label class="checkbox-inline checkbox-success">
          <input type="checkbox" id="Check1" value="flat"> Flat
        </label>

        <label class="checkbox-inline">
          <input type="checkbox" id="Check2" value="villa"> House/Villa
        </label>

        <label class="checkbox-inline">
          <input type="checkbox" id="Check3" value="plot"> Plot
        </label>

    </div>
</div>

 </body>

</html>