如何显示未来复选框元素的值？答案

【问题标题】：How to display the value of the future checkbox element?如何显示未来复选框元素的值？
【发布时间】：2018-01-24 08:19:38
【问题描述】：

我正在附加多个这样的复选框：

$(".btn-sample").on("click", function() {
  $(".container").append(
    '<input class="check-sample" type="checkbox" 
    value="'+check_value+'"/>'
  );
});

我的问题是我的另一个按钮无法获取下面新复选框的值：

 $(".show-checkbox").click(function() {
   var arr = [];
   $('.check-sample:checked').each(function () {
       arr[i++] = $(this).val();
   });
   console.log(arr);
 });

感谢您提前提供帮助！

【问题讨论】：

你的小提琴不一样
您的另一个按钮正在复选框上查找“ads_Checkbox”类（但不确定 jsfiddle 中的详细信息与此处的相关程度）。
这个小提琴代码非常未经优化，也没有思考。如果单击几次，则阵列的开头会出现一个洞。 (4 * x-1) 空数组槽，其中 x 是所有复选框选中时单击的按钮。回到当前问题，你需要其他代码。
我编辑了我的问题，请阅读。谢谢。

标签： javascript jquery html dom checkbox

【解决方案1】：

对于动态添加的元素，试试这个：

$("body").on("click",".btn-sample", function() {
  $(".container").append(
    '<input class="check-sample" type="checkbox" 
    value="'+check_value+'"/>'
  );
});

【讨论】：

谢谢。我会试试这个。

【解决方案2】：

您应该为.container 指定input[type=checkbox] 选择器。因为您将复选框附加到此 div 并且它的大小写与您的小提琴不同。

$(".btn-sample").on("click", function() {
  var check_value = Math.floor(Math.random() * 10);
  $(".container").append(
    '<input class="check-sample" type="checkbox" value="'+check_value+'"/>'
  );
});
 $('#getValue').click(function () {
       $('.container input[type=checkbox]:checked').each(function () {
           console.log($(this).val()); 
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class = "container"></div>
<button type="button" class="btn-sample">Append</button>
<button type="button" id="getValue">Get Value</button>

【讨论】：

谢谢。我会试试这个。

【解决方案3】：

您需要以.container 的子级访问新创建的元素，这是一个称为“委托”的过程。

查看this document 的 jQuery 事件委托。

你也可以看看我不久前做的this fiddle。

简而言之，你必须先引用父元素。

【讨论】：

谢谢。我会试试这个。

【解决方案4】：

试试这个：

$(document).on('click', '.show-checkbox', function () {
   var arr = [];
   $('.check-sample:checked').each(function () {
       arr[i++] = $(this).val();
   });
   console.log(arr);
 });

【讨论】：

结果为空数组