全选按钮在haml文件中不起作用

时间:2019-03-17 14:13:36

标签: javascript html ruby-on-rails haml

import sys
from PIL import Image


def append_images(images,bg_color=(255,255,255), aligment='center'):

    widths, heights = zip(*(i.size for i in images))


    new_width = sum(widths)
    new_height = max(heights)


    new_im = Image.new('RGB', (new_width, new_height), color=bg_color)

    offset = 0
    for im in images:
        y = 0
        if aligment == 'center':
            y = int((new_height - im.size[1])/2)
        elif aligment == 'bottom':
            y = new_height - im.size[1]
        new_im.paste(im, (offset, y))
        offset += im.size[0]


    return new_im
date=input("Enter Date:")
l=['1.jpg','2.jpg','3.jpg']


images = map(Image.open,l)
combo_2 = append_images(images, aligment='center')
combo_2.save('combo_2.jpg')

我正在尝试实现一个全选按钮,以选中所有复选框,并在再次单击时将其切换为未选中状态。

我将javascript代码替换为:

.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
  $(document).ready(function(){
    var clicked = false;
    $(".selectAll").on("click", function() {
      alert("It is clicked.");
      $("form-group.checkbox").prop("checked", !clicked);
      clicked = !clicked;
    });
  });

哪个会生成警报消息,但是什么也没有发生。

有人可以告诉我全选按钮有什么问题吗?以及为什么它不起作用?任何帮助或建议,将不胜感激。谢谢。

2 个答案:

答案 0 :(得分:0)

此行的问题

#include<iostream>

int main(){
  std::string str = std::string("How IS The Josh");
  for(char &ch : str){
    ch = std::tolower(ch);
  }
  std::cout<<str<<std::endl;
  return 0;
}

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

  

将来不要使用'form.splashpage .input.checkbox   .input [type = checkbox]',只有一个特定的类就足够了

您可以通过分配全局变量并在每次单击时切换它来检查以前的情况

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

不必遍历所有 如果要选中/取消选中表单上的所有复选框,只需为复选框提供特定的类(甚至使用.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;
    });
  });

答案 1 :(得分:0)

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

  });