Кнопка «Выбрать все» не работает в файле haml - PullRequest
Новая
       18

Кнопка «Выбрать все» не работает в файле haml

1 голос
/ 17 марта 2019 
.row
  .col-md-12
    .page-header
      %h1 Splashpage

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

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

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

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

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

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

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

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

      = f.inputs name: 'Access' do
        %ul.fa-ul
          %li
            = f.input :public, label: 'Make splash page public?'
  .row
    .col-md-12
      %p.text-right
        = f.submit 'Save Changes', class: 'btn btn-primary'
:javascript
  $(document).ready(function(){
$('#selectAll').click(function(event) {  
    if($('form.splashpage .input.checkbox .input[type=checkbox]').prop('checked') == false) { 
        $('form.splashpage .input.checkbox .input[type=checkbox]').each(function() { 
            this.checked = true;                 
        });
    }else{
        $('form.splashpage .input.checkbox .input[type=checkbox]').each(function() { 
            this.checked = false; "                       
        });         

    }

Я пытаюсь реализовать кнопку выбора всех, чтобы установить все флажки и переключить их на непроверенные при повторном нажатии.

Я заменил код JavaScript на: 

:javascript
  $(document).ready(function(){
    var clicked = false;
    $(".selectAll").on("click", function() {
      alert("It is clicked.");
      $("form-group.checkbox").prop("checked", !clicked);
      clicked = !clicked;
    });
  });

Но предупреждающее сообщение не появилось.

И тогда я заменил его на: 

:javascript
  $(document).ready(function(){
    var clicked = false;
    $('#selectAll').click(function(event) { 
      alert("I am clicked"); 
      $(".checkbox").prop("checked", !clicked);
      clicked = !clicked;
    });
  });

, которое генерирует предупреждающее сообщение, но больше ничего не происходит.

Можеткто-нибудь подскажите пожалуйста что не так с кнопкой выбора всех?И почему это не работает?Любая помощь или предложение будут оценены.Спасибо.

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Я исправил эту проблему, спасибо @muhammad, вот фрагмент кода 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);             
      });

  });
0 голосов
/ 17 марта 2019

Проблема с этой строкой 

if($('form.splashpage .input.checkbox .input[type=checkbox]').prop('checked') == false) {

он не будет сообщать вам предыдущее состояние, он будет сообщать только о состоянии первого флажка.

в будущем не используйте 'form.splashpage .input.checkbox .input [type = checkbox] ', достаточно только одного определенного класса

Вы можете проверить предыдущее условие, назначив глобальную переменную и переключая ее при каждом щелчке, например 

$(document).ready(function(){
    var clicked = false;
    $('#selectAll').click(function(event) {  
      $('form.splashpage .input.checkbox .input[type=checkbox]').each(function() { 
          this.checked = !clicked;                 
      });
      clicked = !clicked;
    });
  });

и вам не нужно перебирать все просто укажите определенный класс для флажков (или даже используйте .checkbox), если хотите установить / снять все флажки в форме 

$(document).ready(function(){
    var clicked = false;
    $(".selectAll").on("click", function() {
      $(".checkbox").prop("checked", !clicked);
      clicked = !clicked;
    });
  });
...