检查3个旧复选框后如何调用3个新复选框？

然后，如果检查了这些新框，则会显示该级别的另外3个复选框。

习惯/ _form.html.erb

<label id="" class="habit-id"> Missed:   = (index + 1) %> 
 <label id="" class="level-id"> Level :   0, {class: "habit-check"} %>  1, {class: "habit-check"} %>  2, {class: "habit-check"} %> 
   

habit.js

 $(document).ready(function() { $(".habit-check").change(function() { habit = $(this).parent().siblings(".habit-id").first().attr("id"); level = $(this).siblings(".level-id").first().attr("id"); if($(this).is(":checked")) { $.ajax( { url: "/habits/" + habit + "/levels/" + level + "/days_missed", method: "POST" }); } else { $.ajax( { url: "/habits/" + habit + "/levels/" + level + "/days_missed/1", method: "DELETE" }); } }); }); 

habit.rb

 class Habit  { where(private_submit: true) } scope :public_submit, -> { where(private_submit: false) } attr_accessor :missed_one, :missed_two, :missed_three def save_with_current_level self.levels.build self.levels.build self.levels.build self.levels.build self.levels.build self.save end def self.committed_for_today today_name = Date::DAYNAMES[Date.today.wday].downcase ids = all.select { |h| h.committed.include? today_name }.map(&:id) where(id: ids) end def current_level_strike levels[current_level - 1] # remember arrays indexes start at 0 end def current_level return 0 unless date_started def committed_wdays committed.map do |day| Date::DAYNAMES.index(day.titleize) end end def n_days ((date_started.to_date)..Date.today).count do |date| committed_wdays.include? date.wday end - self.missed_days - self.days_lost end case n_days when 0..9 1 when 10..24 2 when 25..44 3 when 45..69 4 when 70..99 5 else 6 end end end 

days_missed_controller

 class DaysMissedController < ApplicationController before_action :logged_in_user, only: [:create, :destroy] def create habit = Habit.find(params[:habit_id]) habit.missed_days = habit.missed_days + 1 habit.save! level = habit.levels.find(params[:level_id]) level.missed_days = level.missed_days + 1 level.save! head :ok # this returns an empty response with a 200 success status code if missed_days == 3 missed_days = 0 days_lost += pending_days pending_days += 1 pending_days = 0 end end def destroy habit = Habit.find(params[:habit_id]) habit.missed_days = habit.missed_days - 1 habit.save level = habit.levels.find(params[:level_id]) level.missed_days = level.missed_days - 1 level.save! head :ok # this returns an empty response with a 200 success status code end end 

如果您需要进一步的说明，代码或图片，请不要犹豫，您也可以自行决定我的附加代码： https ： //gist.github.com/RallyWithGalli/c66dee6dfb9ab5d338c2

谢谢！

Answer 1

将change事件的处理程序附加到每个复选框，该复选框计算具有属性type="checkbox"输入元素的数量，其中:not(:checked) 。 如果没有未选中的框，请添加三个框并将相同的单击事件处理程序附加到每个新框。 每次填充所有盒子时，它将添加三个新盒子。

这是脚本的相关逻辑部分

 if(!element.querySelectorAll('input[type="checkbox"]:not(:checked)').length) { /* add three checkboxes */ } 

如果没有类型复选框的输入字段没有选中状态，则length属性将不确定并解析为false。 如果存在与先前声明的标准匹配的输入字段，则length属性将是1或更高的数值，并将解析为true。

例

 var boxWrap = document.querySelector('.boxes'); var handleChange = function() { if (!boxWrap.querySelectorAll('input[type="checkbox"]:not(:checked)').length) { addBoxes(3); } }; var addBoxes = function(n) { for (i = 0; i < n; i++) { var box = document.createElement('input'); box.type = 'checkbox'; box.addEventListener('change', handleChange, false); boxWrap.appendChild(box); } }; boxes = boxWrap.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < boxes.length; i++) { boxes[i].addEventListener('change', handleChange, false); }