Question

我使用JQuery创建Javascript代码来创建包含自由文本，单选按钮（单选）和复选框（多选）问题的测验。测验是使用Web界面进行的，样式为Zurb - Foundation，并且正在使用JSON进行序列化。在创建单选按钮和特定问题的复选框答案时，当用户检查任一组件时（例如，将其标记为有效答案），它应该验证这一点，并且变为“true”（由JSON中的数字“1”。

它目前正在处理文本类型问题，因为它基本上是硬编码的。但它并没有为其他两个做伎俩。

这是代码的主要部分（如果需要更多，我将编辑问题）：整个测验

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

如果你使用

，它会更聪明

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

返回值是布尔值

Answer 2

查找选中的值时请勿使用attr()，因为它实际上是一个属性，因此应使用.prop()。

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并取消选中将其切换为布尔值FALSE

Answer 3

还有另一种简单的方法..

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

设置复选框使用

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

Answer 4

感谢有这个问题的朋友解决了我的问题：

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

更改为：

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

Javascript中的单选按钮和复选框“已检查”问题

4 个答案: