时间戳

首页 > 解决方案 > 选中时在每个复选框中触发更改事件

javascript - 选中时在每个复选框中触发更改事件

问题描述

我有一个简单的测验，用户可以通过单击下一步来回答多个问题，现在我想在选中复选框时更改复选框背景

这是一个演示测验演示

这是我尝试过的

选中复选框时更改背景颜色的功能

$("input[type='checkbox']").on('change', function(){
      console.log('clicked');
      if($(this).is(":checked")){
        console.log('Chodzi')
          $(this).addClass("input-before"); 
      }
      else{
        console.log('Nie chodzi');
          $(this).removeClass("input-before");  
      } });

现在，当我运行我的应用程序并单击复选框时，复选框会更改背景，但是当我单击下一步然后单击复选框时，背景不会更改。

我需要更改什么才能使其正常工作？

标签： javascriptjqueryhtmlcheckbox

解决方案

我相信解决方案很简单，将侦听器添加到一些动态添加的元素中，您只需像这样使用 JQuery：

  $("section").on('change',"input[type='checkbox']", function(){
      console.log('clicked');
      if($(this).is(":checked")){
         console.log('Chodzi')
         $(this).addClass("input-before"); 
      }
      else {
         console.log('Nie chodzi');
         $(this).removeClass("input-before");  
      } 
  });

这是用我的编辑更新的小提琴

所以基本上你必须将监听器添加到容器中，它会将监听器“传播”到每个input[type='checkbox']是（或将是）它的子级的监听器。

推荐阅读