Select-All button is not working in haml file

Question

.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; "                       
        });         

    }

I am trying to implement a select-all button to check all the checkboxes and toggle them to unchecked when clicked again.

I replaced the javascript code with:

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

But the alert message did not appear.

And then I replaced it with:

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

Which generates the alert message, but nothing else happens.

Can someone please tell me what is wrong with the select-all button? And why it is not working? Any help or suggestion will be appreciated. Thanks.

Answer 1

Issue with with this line

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

its not going to tell you previous state, it 'll tell state of first checkbox only.

in Future don't use 'form.splashpage .input.checkbox .input[type=checkbox]', only one specific class is enough

You can check previous condition by assign a global variable and toggle it at each click like

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

and you don't have to loop through all just give a specific class to checkboxes (or even use .checkbox) if want to check/unchek all checkboxes on form

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

Answer 2

I fixed that issue,thanks @muhammad, here is the javascript snippet I used:

: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);             
      });

  });