全选按钮在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;
    });
  });

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

谁能告诉我全选按钮有什么问题？为什么它不起作用？任何帮助或建议将不胜感激。谢谢。

Answer 1

这一行的问题

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

Answer 2

我解决了这个问题，感谢@muhammad，这是我使用的 javascript sn-p：

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

  });