Question

脚本：

 $(document).on("click",".check",function(){   
    $(".check").each(function(){
        alert(JSON.stringify(this));
    });
 });

元素：

  <input class="check check-list" value="1" type="checkbox" name="check-obj">1
  <input class="check check-list" value="2" type="checkbox" name="check-obj">2
  <input class="check check-list" value="3" type="checkbox" name="check-obj">3
  <input class="check check-list" value="4" type="checkbox" name="check-obj">4

我的问题是，当我选中该复选框时，它将仅返回一个空警报"{}"，我试图获取this.val()并返回"this.val is not a function"。如何从复选框中获取要显示的值？

Answer 1

.val()是一种jQuery方法，仅适用于jQuery对象。因此，您需要将this包装在$()中才能使用.val()：

$(this).val()

或者，您可以使用this.value，这是从元素中获取value的常用javascript方法。

此外，您无需使用JSON.stringify()，因为$(this).val()（和this.value）已经为您提供了一个字符串，因此您的基本工作是转向{{1} }放入"1"（呈现为"\"1\""）。

请参见以下示例：

""1""

$(document).on("click", ".check", function() {
  $(".check").each(function() {
    alert($(this).val()); // this.value works aswell
  });
});

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="check check-list" value="1" type="checkbox" name="check-obj">1
<input class="check check-list" value="2" type="checkbox" name="check-obj">2
<input class="check check-list" value="3" type="checkbox" name="check-obj">3
<input class="check check-list" value="4" type="checkbox" name="check-obj">4

$(document).on("click",".check",function() {
    var values=[];
    $(".check:checked").each(function(){
        values.push($(this).val());
    });
    alert(JSON.stringify(values));
 });

与您的

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="check check-list" value="1" type="checkbox" name="check-obj">1
  <input class="check check-list" value="2" type="checkbox" name="check-obj">2
  <input class="check check-list" value="3" type="checkbox" name="check-obj">3
  <input class="check check-list" value="4" type="checkbox" name="check-obj">4

中的

this是每个JSON.stringify(this)元素（input）。 DOMElement不存在，this.val()没有这种方法，DOMElement是jQuery的方法，因此您必须使用jQuery选择元素，然后使用val() ：val()。

但是$(this).val()将始终返回该字段的 value ，在您的情况下为val()，1，2和{{1} }。如果要查看是否已选中它们，则必须选中“ checked”属性。使用jQuery做到这一点的一种简单方法是使用3选择器。

因此，如果您打算获取所检查元素的值的JSON列表，则必须执行以下操作：

Answer 3

使用纯js，您可以选择所有类为:checked的元素，然后向每个元素添加事件侦听器。

$(document).on("click",".check",function() {
    var values=[];
    $(".check:checked").each(function(){
        values.push($(this).val());
    });
    alert(JSON.stringify(values));
 });

.check

Answer 4

如果要获取选中的单选按钮的值，请使用此

$('.check').off().on('click', function() {
    $('.check:checked').each(function() {
        alert($(this).val());
    });
});

如果您需要的是所有复选框的值，请使用此

$('.check').off().on('click', function() {
    let $this = $(this);
    $('.check').each(function() {
        alert($(this).val());
    });
});

从现有元素获取空值

4 个答案: