Question

我正在创建一个显示连锁酒店列表的对话框。我的对话框正在创建

<div id="HotelDialog" class="popup ui-dialog-content ui-widget-content">
 <div class="popup-hotel">
  <div class="checkbox">
   <input id="ChainBR" type="checkbox" name="HotelChainBR" value="BR" checked="checked" onclick="filterChain();">
   <label for="ChainBR">BR Hotel</label>
  </div>
  <div class="checkbox">
   <input id="ChainBW" type="checkbox" name="HotelChainBW" value="BW" checked="checked" onclick="filterChain();">
   <label for="ChainBW">BW Hotel</label>
  </div>
  <div class="checkbox">
   <input id="ChainCI" type="checkbox" name="HotelChainCI" value="CI" checked="checked" onclick="filterChain();">
   <label for="ChainCI">CI Hotel</label>
  </div>
 </div>
</div>

我的最终目标是用户将点击每个酒店，如果他们取消选中该框，则具有等于复选框值的数据链值的div消失。每次检查/取消选中一个时，我都会尝试将复选框值输出到控制台，但每次只输出BR。我的选择陈述中我做错了什么？

<script type="application/javascript">
var hotelchains = [['BR'],['BW'],['CI']]; 

function filterChain() {
 for (loopcnt = 0; loopcnt <= (hotelchains.length-1); loopcnt++) {
  var singlechain = $('input[name^="HotelChain"]').val();
  console.log(singlechain);
 };
};

Answer 1

这是因为val仅返回第一个选定元素的值，并且您在每次迭代中选择相同的元素，您可以使用eq或each方法：

$('input[name^="HotelChain"]').each(function(){
    var val = this.value;
    console.log(val)
})

或：

var hotelchains = ['BR','BW','CI']; 
var $input = $('input[name^="HotelChain"]');

function filterChain() {
   for (var i = 0; i < hotelchains.length ; i++) {
      var singlechain = $input.filter('[name="HotelChain'+hotelchains[i]+'"]').val();
      console.log(singlechain);
   };
};

Answer 2

$('input[name^="HotelChain"]').val();

这只会输出选择器找到的第一个值..

这就是你总能看到 BR

的原因

同时检查你的阵列......应该是

var hotelchains = ['BR','BW','CI'];

试试这个

var hotelchains = ['BR','BW','CI']; 

function filterChain() {
 for (loopcnt = 0; loopcnt <= (hotelchains.length-1); loopcnt++) {
  var singlechain = $('input[name="HotelChain' + hotelchains[loopcnt] + '"]').val();
  console.log(singlechain);
 };

jQuery过滤输入名称

2 个答案: