Question

我是javascript新手，.haml文件中的这段代码有问题：

:javascript
  $(document).click(function(){
    var originalState = true;
    $('form.splashpage .inputs:first .input.click input[type=button]:not(.select-all)').each(function() {
      originalState = originalState && $(this).is(':checked');
    });
    $('form.splashpage .select-all').prop('checked', originalState);

    $('form.splashpage').on('change', '.select-all', function(e) {
      var value = $(this).is(':checked');
      var parent = $(this).parents('.inputs:first');
      parent.find('.input.checkbox input[type=checkbox]').prop('checked', value);
    });
});

和

%li
   .boolean.input.optional.form-group.checkbox
      %span.form-wrapper
        %label.control-label
          %input.select-all{ type: 'button' }

完整文件如下：

.row
  .col-md-12
    .page-header
      %h1 page_name

= semantic_form_for(@page_name, url: admin_conference_page_name_path(@conference.short_title)) do |f|
  .row
    .col-md-12
      = f.inputs name: 'Components' do
        %ul.fa-ul
          %li
            %li
   .boolean.input.optional.form-group.checkbox
      %span.form-wrapper
        %label.control-label
          %input.select-all{ type: 'button' }
          %li
            = f.input :include_cfp, label: 'Display call for papers and call for tracks, while open', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_cfp) }
          %li
            = f.input :include_program, label: 'Display the program', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_program) }

            %ul.fa-ul
              %li
                = f.input :include_tracks, label: 'Include confirmed tracks', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_tracks) }
              %li
                = f.input :include_booths, label: 'Include confirmed booths', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_booths) }

          %li
            = f.input :include_registrations, label: 'Display the registration period', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_registrations) }

          %li
            = f.input :include_tickets, label: 'Display tickets', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_tickets) }

          %li
            = f.input :include_venue, label: 'Display the venue', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_venue) }

          %li
            = f.input :include_lodgings, label: 'Display the lodgings', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_lodgings) }

          %li
            = f.input :include_sponsors, label: 'Display sponsors', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_sponsors) }

          %li
            = f.input :include_social_media, label: 'Display social media links', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_social_media) }

      = f.inputs name: 'Access' do
        %ul.fa-ul
          %li
            = f.input :public, label: 'Make this page public?'
  .row
    .col-md-12
      %p.text-right
        = f.submit 'Save Changes', class: 'btn btn-primary'

    :javascript
  $(document).click(function(){
    var originalState = true;
    $('form.page_name .inputs:first .input.click input[type=button]:not(.select-all)').each(function() {
      originalState = originalState && $(this).is(':checked');
    });
    $('form.page_name .select-all').prop('checked', originalState);

    $('form.page_name').on('change', '.select-all', function(e) {
      var value = $(this).is(':checked');
      var parent = $(this).parents('.inputs:first');
      parent.find('.input.checkbox input[type=checkbox]').prop('checked', value);
    });
});

实际上，我想将select-all checkbox转换为select-all button。但是我不知道自己在犯什么错误。任何帮助或建议，将不胜感激。谢谢。

Answer 1

我使用javascript代码修复了该问题：

:javascript
  $(document).ready(function(){
    var clicked = true;
    $('#selectAll').click(function(event) { 
      var parent = $(this).parents('.inputs:last');
      parent.find('.input.checkbox input[type=checkbox]').prop('checked', clicked);             
      });

  });

无法通过JavaScript在haml文件中添加全选按钮

1 个答案: