使用 JQuery 获取复选框选中状态

Posted 2023-03-04

【中文标题】使用 JQuery 获取复选框选中状态

【英文标题】：Get checkbox selected state with JQuery

【发布时间】：2016-12-13 20:54:18

【问题描述】：

我尝试了很多方法来获取复选框的选中状态。它是一个带有类型复选框的输入字段。

我尝试了以下方法来获取状态，但都返回false。仅当复选框之前使用 jQuery 设置为选中/未选中时（这是使用 $.prop("checked", "true") 完成的。

$("#ID").prop("checked");
$("#ID").val(); //returns "on" everytime
$("#ID").attr("checked");
$("#ID").checked; //undefined

ID 是我代码中的真实 ID！

选中状态也是这样用jQuery设置的：

$(columns[i]).children().first().prop("checked", stateArray[i]);

复选框位于 KendoGrid 中，columns.children 获取所有 td's 并且 first() 返回输入。

stateArray 是一个具有真/假的数组。

没有任何效果...你有什么想法吗？

问候

编辑：我发现了错误...为输入生成的 ID 始终相同...所以它选择了第一个未选择的元素...我很抱歉！

【问题讨论】：

你需要定位的元素对象在哪里？

首先从DOM中选择checkbox，然后读取其checked属性。

'' 这是对象。我通过带有 ID 选择器的 JQuery 选择它

.prop 和 .attr 应该可以工作。请展示您实际使用它们的方式。

'var checkState = $("#" + target.id).prop("checked"); var id = deviceDGM.getSelectedHiddenValue("hidden_​​id"); checkState = checkState ==“真”？ “假”：“真”；'这就是我将复选框与 OnChange 事件一起使用的方式。它总是显示“假”

【参考方案1】：

要查找复选框选中或不使用$('input[type="checkbox"]').prop("checked")

更多了解请查看下面的 sn-p。

$('input[type="checkbox"]').on('change',function()
  if($(this).prop('checked'))
    alert("checked");
  else
    alert("un-checked");  
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"/>

【讨论】：

我是否获得了网格中的特定元素？它不会在我的网格中返回带有类型复选框的每个输入吗？我还需要为 SQLQuery 选择的行

请检查我更新的答案。如果您有多个复选框，那么在这种情况下，您可以使用 jquery 的“on change”事件侦听器和 $(this) 来获取复选框的状态。

【参考方案2】：

您需要先从DOM 中选择checkbox，然后读取其checked 属性。

$(function() 
  console.log($('#ab3fee6b-c81e-e4ba-b12e-2c088bb386cc_A4').prop('checked'));
  console.log($('#ab3fee6b-c81e-e4ba-b12e-2c088bb386cc_A5').prop('checked'));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="ab3fee6b-c81e-e4ba-b12e-2c088bb386cc_A4" type="checkbox" data-role="check" otg-visible="true" style="-webkit-appearance: checkbox !important; width: 20px; height: 20px; display: table-cell; margin: 0px;">
<input id="ab3fee6b-c81e-e4ba-b12e-2c088bb386cc_A5" type="checkbox" data-role="check" checked otg-visible="true" style="-webkit-appearance: checkbox !important; width: 20px; height: 20px; display: table-cell; margin: 0px;">

【讨论】：

我已经尝试过了...不工作：/ 使用 .prop("checked", "true/false") 更改选定状态有效...但无法读取

【参考方案3】：

你的选择器在哪里？像下面这样使用is(":checked")。

var status = $(':checkbox').is(":checked");

【讨论】：

然后像$("#ID").is(":checked")@szmast3r一样使用

也不工作：/它返回false...我将编辑开始帖子并显示我如何将其设置为选中或未选中...也许有帮助