创建一个复选框按钮的散列，这些按钮在单击时在Twitter Bootstrap Button组中处于活动状态

Create a hash of checkbox buttons that are active among a Twitter Bootstrap Button group on click

本文关键字：按钮 Bootstrap Twitter 单击 Button 活动状态 一个 复选框 创建      更新时间：2024-04-23

我有多组Twitter Bootstrap复选框组。当点击任何一个复选框按钮时，我想创建一个所有活动（即Bootsrtap添加"活动"类）按钮的哈希。假设点击几次后html是这样的：

<div id="horizontal" class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn active" data-hposition="1">Left</button>
  <button class="btn" data-hposition="2">Middle</button>
  <button class="btn active"data-hposition="3">Right</button>
</div>
<div id="vertical" class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn" data-vposition="1">Top</button>
  <button class="btn active" data-vposition="2">Center</button>
  <button class="btn active" data-vposition="3">Bottom</button>
</div>

我一开始只使用一个div，但没有得到正确的结果：

<script>
  $('#horizonatal').click( function(){
      var paramsHash = {};
      var hids = [];
    $('.active').each( function() {
      paramsHash.hids.push($(this).data('hposition'));
  })
      console.log(paramsHash.hids);    
})
</script>

使用上面的html，当我点击"右"时，我会在控制台中得到类似[1,undefined]的东西。

最终，我想得到一个像{ {'hids', [ 1, 3 ]}, {'vids', [ 2, 3, ]} } 一样发布的哈希

我尝试了jsfiddle，但我认为我没有正确加载Bootstrap的东西，因为我看不到按钮会激活。

这是因为你的数据属性中有拼写错误（小提琴上的），而且你选择了所有.active类，而不是那些属于水平div的类，并且由于它们没有数据位置属性，它返回未定义，请尝试以下操作：

$('#horizontal').click( function(){
      var paramsHash = {
              hids: [],
            //vidz: []
          }
    $('.active', this).each( function() {
      paramsHash.hids.push($(this).data('hposition'));
   // paramsHash.vidz.push($(this).data('classroom'));
    })
      console.log(paramsHash);    
})

演示

请注意，它们是按钮标签，而不是单选按钮。

相关文章：