Select-All按钮在haml文件中不起作用

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

    }

我正在尝试实现一个全选按钮来检查所有复选框，并在再次单击时将其切换为未选中。

我用以下代码替换了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;
    });
  });

这会生成警报消息，但不会发生任何其他情况。

有人可以告诉我select-all按钮有什么问题吗？为什么它不起作用？任何帮助或建议将不胜感激。谢谢。

Answer 1

与此问题有关

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

它不会告诉你以前的状态，它只会告诉你第一个复选框的状态。

在Future中不要使用'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;
    });
  });

Answer 2

我修复了这个问题，感谢@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);             
      });

  });