在Javascript中「檢查」問題的radiibuttons和複選框

Question

我有使用JQuery的Javascript代碼來創建包含自由文本，單選按鈕（單選）和複選框（單選題）問題的測驗。測驗是使用Web界面製作的，樣式爲Zurb - Foundation，並且正在使用JSON進行序列化。雖然創建單選按鈕和複選框會回答特定問題，但當用戶檢查任一組件（例如將其標記爲有效答案）時，它應該驗證此結果，並且以「真」（由數字「1」）在JSON中。

它目前正在處理文本類型問題，因爲它基本上是硬編碼的。但是這對另外兩個人來說並沒有訣竅。

這裏的代碼的主件（如果有需要，我會編輯的問題）：整體測驗

storeQuiz: function(event) { 
     var self = event.data; 
     var store = []; 

     $(self.element).find('.question-content').each(function(){ 
     var question = $(this); 
     var entry = { options: [] }; 

     if (question.parent().attr('class').match(/template/)) { 
      return true; 
     } 

     entry['content'] = question.find('.input').val(); 
     entry['type'] = question.parent().attr('class').match(/quiz-(\w+)/)[1]; 

     question.find('.option').each(function() { 
      var option = $(this); 
      var data = {}; 

      if (entry.type === 'text') { 

      data['valid'] = true; 
      } else { 
      data['valid'] = !!option.find('.option-validation input').attr('checked'); 
      } 

      data['content'] = option.find('.option-content textarea').val(); 

      entry.options.push(data); 
     }) 

     store.push(entry); 
     }); 

     self.storeUpdate(store); 
    }, 

收音機：

buildRadios: function(data) { 
     var tmpl = this.radiosHandler({data: this}); 
     var self = this; 

     tmpl.find('.option').remove(); 
     tmpl.find('.input').val(data.content); 

     $.each(data.options, function() { 
     var plus = tmpl.find('.add'); 
     var option = self.addAnswer.call(plus, {data: self}); 
     option.find('.option-validation input').attr('checked', this.valid); 
     option.find('.option-content textarea').val(this.content); 
     }); 
    }, 

複選框：

buildCheckboxes: function(data) { 
     var tmpl = this.checkboxesHandler({data: this}); 
     var self = this; 

     tmpl.find('.option').remove(); 
     tmpl.find('.input').val(data.content); 

     $.each(data.options, function() { 
     var plus = tmpl.find('.add'); 
     var option = self.addAnswer.call(plus, {data: self}); 
     option.find('.option-validation input').attr('checked', this.valid); 
     option.find('.option-content textarea').val(this.content); 
     }); 
    }, 

Answer 1

我解決我的問題多虧了朋友與此修復程序：

data['valid'] = !!option.find('.option-validation input').attr('checked'); 

更改爲：

data['valid'] = option.find('.option-validation input').is(':checked'); 

Answer 2

查找檢查值時不要使用attr()，因爲它實際上是一個屬性，因此應該使用3210。

if($('input[type="checkbox"]').prop('checked') === true) 
{ 
    // checkbox is checked, uncheck it 
    $('input[type="checkbox"]').prop('checked', false); 
} 
else 
{ 
    // checkbox is unchecked, check it 
    $('input[type="checkbox"]').prop('checked', true); 
} 

如果你想獲得幻想：

$('input[type="checkbox"]').on('change', function(){ 
    if($(this).prop('checked')){ 
     alert('TRUE : checked'); 
    } 
    else{ 
     alert('FALSE : unchecked'); 
    } 
}); 

這是<input type="checkbox" checked>作品，而無需做<input type="checkbox" checked="checked">

當你選中一個複選框，用鼠標那麼DOM對象的屬性的原因被設置爲布爾值TRUE並取消選中將其切換爲布爾值假

Answer 3

如果您使用

$('input[type="checkbox"]').is(':checked'); 

返回值是布爾

Answer 4

還有一種簡單的方法..

if($('inputSelector')[0].checked == true) { 
} 

設置複選框使用

$('inputSelector')[0].checked = true/false;