Twitter Bootstrap Checkbox JavaScript

Question

Я делаю checkboxes/radio/toggle группы для Bootstrap, но мне не удалось установить флажки - вы можете помочь мне заставить их работать?

HTML:

<form id="edit-accounts" class="form-horizontal" method="post"> 
    <fieldset> 

     <div class="control-group"> 
      <label class="control-label">Radio Group:</label> 
      <div class="controls btn-group" data-toggle="buttons-radio" data-toggle-name="radio_group"> 
       <button type="button" value="1" class="btn" data-toggle="button">first</button> 
       <button type="button" value="2" class="btn" data-toggle="button">second</button> 
       <button type="button" value="3" class="btn" data-toggle="button">third</button> 
      </div> 
      <input type="hidden" name="radio_group" value="1" /> 
     </div> 

     <div class="control-group"> 
      <label class="control-label">Checkbox Group:</label> 
      <div class="controls btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group"> 
       <button type="button" value="1" class="btn" data-toggle="button">js</button> 
       <button type="button" value="2" class="btn" data-toggle="button">fiddle</button> 
       <button type="button" value="3" class="btn" data-toggle="button">alpha</button> 
      </div> 
      <input type="hidden" name="checkbox_group" value="1" /> 
     </div> 

     <div class="control-group"> 
      <label class="control-label">Toggle:</label> 
      <div class="controls btn-group" data-toggle="button" data-toggle-name="button_group"> 
       <button type="button" value="1" class="btn" data-toggle="button">on/off</button> 
      </div> 
      <input type="hidden" name="button_group" value="1" /> 
     </div> 
    </fieldset> 
</form>​ 

JavaScript:

$(function() { 
    $('div.btn-group[data-toggle-name=*]').each(function() { 
     var form = $(this).parents('form').eq(0); 
     var name = $(this).attr('data-toggle-name'); 
     var hidden = $('input[name="' + name + '"]', form); 
     var type = $(this).attr('data-toggle'); 
     var check = []; 
     $('button', $(this)).each(function() { 
      $(this).live('click', function() { 
       if($(this).val() == hidden.val()) { 
        switch(type) { 
        case 'button': 
         $(this).removeClass('active'); 
         hidden.val(0); 
         break; 
        case 'buttons-checkbox': 
         $(this).removeClass('active'); 
         break; 
        default: 
         hidden.val($(this).val()); 
        } 
       } else { 
        switch(type) { 
        case 'button': 
         $(this).addClass('active'); 
         hidden.val(1); 
         break; 
        case 'buttons-checkbox': 
         $(this).addClass('active'); 
         break; 
        default: 
         hidden.val($(this).val()); 
        } 
       } 
      }); 
      if($(this).val() == hidden.val()) $(this).addClass('active'); 
     }); 
    }); 
});​ 

working prototype

Answer 1

Это, как я переписал код, чтобы сделать его хорошо работать с флажков группы:

jQuery(function($) { 
    $('div.btn-group[data-toggle-name]').each(function(){ 
      var group = $(this); 
      var form = group.parents('form').eq(0); 
      var name = $(this).attr('data-toggle-name'); 
      var hidden = $('input[name="' + name + '"]', form); 
      var type = group.attr('data-toggle'); 
      var check = (hidden.val() != '') ? hidden.val().split(',') : []; 
      $('button', group).each(function() { 
       var button = $(this); 
       button.live('click', function() { 
        switch(type) { 
         case 'buttons-checkbox': 
          if(check.indexOf(button.val()) == -1){ 
           button.addClass('active'); 
           check.push(button.val()); 
          }else{ 
           check.splice(check.indexOf(button.val()),1); 
           button.removeClass('active'); 
          } 
          hidden.val(check.toString()); 
          break; 
         case 'button': 
          if(button.val() == hidden.val()) { 
           button.removeClass('active'); 
           hidden.val(0); 
          } else { 
           button.addClass('active'); 
           hidden.val(1); 
          } 
          break; 
         default: 
          hidden.val(button.val()); 
          break; 
        } 
       }); 
       switch(type) { 
        case 'buttons-checkbox': 
         for (i=0;i<check.length;i++) { 
          if(button.val() == check[i]) { 
           button.addClass('active'); 
          } 
         } 
         break; 
        default: 
         if(button.val() == hidden.val()) { 
          button.addClass('active'); 
         } 
         break; 
       } 

      }); 
    }); 
}); 

Answer 2

HTML-код кажется действительным. Вопрос приходит к вашей JS. Я проверил ваш код через JSHint, онлайн-линкер для JS. Он возвратил следующие проблемы.

Line 2: $('div.btn-group[data-toggle-name=*]').each(function() { 
Missing "use strict" statement. 

Line 10: if($(this).val() == hidden.val()) { 
Expected '===' and instead saw '=='. 

Line 36: if($(this).val() == hidden.val()) $(this).addClass('active'); 
Expected '===' and instead saw '=='. 

Line 36: if($(this).val() == hidden.val()) $(this).addClass('active'); 
Expected '{' and instead saw '$'. 

Line 39: });​ 
Unexpected '​'. 

Надеюсь, что это поможет и DFTBA. :)

Answer 3

Почему бы вам не использовать самозагрузки-button.js

http://twitter.github.com/bootstrap/javascript.html#buttons