javascript - 无法通过 javascript 在haml文件中添加全选按钮
问题描述
我是 javascript 新手,在 .haml 文件中的这段代码有问题:
:javascript
$(document).click(function(){
var originalState = true;
$('form.splashpage .inputs:first .input.click input[type=button]:not(.select-all)').each(function() {
originalState = originalState && $(this).is(':checked');
});
$('form.splashpage .select-all').prop('checked', originalState);
$('form.splashpage').on('change', '.select-all', function(e) {
var value = $(this).is(':checked');
var parent = $(this).parents('.inputs:first');
parent.find('.input.checkbox input[type=checkbox]').prop('checked', value);
});
});
和
%li
.boolean.input.optional.form-group.checkbox
%span.form-wrapper
%label.control-label
%input.select-all{ type: 'button' }
完整的文件如下所示:
.row
.col-md-12
.page-header
%h1 page_name
= semantic_form_for(@page_name, url: admin_conference_page_name_path(@conference.short_title)) do |f|
.row
.col-md-12
= f.inputs name: 'Components' do
%ul.fa-ul
%li
%li
.boolean.input.optional.form-group.checkbox
%span.form-wrapper
%label.control-label
%input.select-all{ type: 'button' }
%li
= f.input :include_cfp, label: 'Display call for papers and call for tracks, while open', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_cfp) }
%li
= f.input :include_program, label: 'Display the program', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_program) }
%ul.fa-ul
%li
= f.input :include_tracks, label: 'Include confirmed tracks', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_tracks) }
%li
= f.input :include_booths, label: 'Include confirmed booths', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_booths) }
%li
= f.input :include_registrations, label: 'Display the registration period', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_registrations) }
%li
= f.input :include_tickets, label: 'Display tickets', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_tickets) }
%li
= f.input :include_venue, label: 'Display the venue', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_venue) }
%li
= f.input :include_lodgings, label: 'Display the lodgings', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_lodgings) }
%li
= f.input :include_sponsors, label: 'Display sponsors', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_sponsors) }
%li
= f.input :include_social_media, label: 'Display social media links', input_html: { checked: params[:action] == 'new' || @page_name.try(:include_social_media) }
= f.inputs name: 'Access' do
%ul.fa-ul
%li
= f.input :public, label: 'Make this page public?'
.row
.col-md-12
%p.text-right
= f.submit 'Save Changes', class: 'btn btn-primary'
:javascript
$(document).click(function(){
var originalState = true;
$('form.page_name .inputs:first .input.click input[type=button]:not(.select-all)').each(function() {
originalState = originalState && $(this).is(':checked');
});
$('form.page_name .select-all').prop('checked', originalState);
$('form.page_name').on('change', '.select-all', function(e) {
var value = $(this).is(':checked');
var parent = $(this).parents('.inputs:first');
parent.find('.input.checkbox input[type=checkbox]').prop('checked', value);
});
});
实际上,我想将 a 转换select-all
checkbox
为select-all
button
. 但我不知道我犯了什么错误。任何帮助或建议将不胜感激。谢谢。
解决方案
我使用 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);
});
});
推荐阅读
- python - 在列表中找到所有的山丘和山谷
- shell - 如何在詹金斯工作区中移动文件?
- excel - PowerPivot how to remove column filter through VBA code
- java - 如何使用 JNA 指针在内存中写入数据?
- regex - 正则表达式中的转义逗号 - Notepad++
- ansible - 如何避免用ansible进行变量替换
- c# - 用于格式错误的 JSON 的自定义 JSON 反序列化器
- angularjs - 如何从下拉数组中的元素数组中选择一个值
- python - 不规则广播视图 numpy
- angular - 共享模块中的角度导入/导出模块或多个模块中的导入