.val() 不工作并且返回为“on”答案

【问题标题】：.val() is not working and is returning as "on".val() 不工作并且返回为“on”
【发布时间】：2021-08-23 23:56:40
【问题描述】：

为什么会这样？我在这里没有使用正确的语法？

HTML如下

<div id="tasks" value="1" class="1">
<input type="checkbox">
<label>Task has been added</label>
</div>

jQuery如下

$("#cButton").click(function () {
        var arr_id = [];
        $(":checkbox:checked").each(function (i) {
            arr_id[i] = $(this).val();
            console.log("$(this).val() : " + $(this).val());
        })
        if (arr_id.length == 0) {
            alert("atleast check one");
        } else {
            for (var i = 0; i < arr_id.length; i++) {
                $("." + arr_id[i]).remove();
                console.log("Hello");
            }
        }
    });

控制台操作如下

$(this).val() : on

【问题讨论】：

给value 输入（复选框）而不是父div。
@tmsbrndz：.each() 内，$(this) 是复选框，而不是父 div。
@Louys Patrice Bessette 我的意思是在 html 上。
呼！！！这就是他想要的价值！？！我没注意到……那很好。
题外话：您可能想要：arr_id.push($(this).val()) 按顺序设置您的阵列。

标签： html jquery css web

【解决方案1】：

使用 jQuery 从复选框输入中获取布尔值的最佳方法是使用 prop：$(this).prop("checked")。

如果省略了 value 属性，则复选框的默认值为 on MDN input type="checkbox"

如果你需要使用输入的值，你应该把它放在输入标签中。因为您没有设置值，所以在调用 val() 时会采用默认的“on”。

$("#cButton").click(function () {
        var arr_id = [];
        $(":checkbox:checked").each(function (i) {
            arr_id[i] = $(this).prop("checked");
            console.log($(this).prop("checked"));
        })
        if (arr_id.length == 0) {
            alert("atleast check one");
        } else {
            for (var i = 0; i < arr_id.length; i++) {
                $("." + arr_id[i]).remove();
                console.log("Hello");
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks" value="1" class="1">
  <input type="checkbox">
  <label>Task has been added</label>
</div>
<button id="cButton">Button</button>

【讨论】：

【解决方案2】：

您将value 属性放在父<div> 上...<div> 没有值。它必须在input。

可以有值的元素是^ref：

<button>
<data>
<input>
<li>
<meter>
<option>
<progress>
<param>

$("#cButton").click(function() {
  var arr_id = [];
  $(":checkbox:checked").each(function(i) {
    arr_id[i] = $(this).val();
    console.log("$(this).val() : " + $(this).val());
  })
  if (arr_id.length == 0) {
    alert("atleast check one");
  } else {
    for (var i = 0; i < arr_id.length; i++) {
      $("." + arr_id[i]).remove();
      console.log("Hello");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks" class="1">
  <input type="checkbox" value="1">
  <label>Task has been added</label>
</div>
<button id="cButton">Button</button>

【讨论】：