Question

我是Jquery的新手，我正在尝试使用attr（）获取复选框的值。但是警告框中的结果显示＆＃34; undefined＆＃34;。有人解释为什么会发生这种情况？

＆＃13;

$("#checkbox").click(function() {
  alert($("checkbox").attr("value"));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" id="checkbox" value="US">USA
<input type="checkbox" name="checkbox" id="checkbox" value="Rus">Russia
<div id="result"></div>

＆＃13;

Answer 1

这里有几个问题：

$('checkbox')不是有效的选择器，因为它正在搜索不存在的<checkbox />元素。您可以改为选择元素，例如[name="checkbox"]或使用:checkbox选择器。
您应该使用val()方法获取表单输入的值，而不是attr('value')
您有多个具有相同id的元素无效。 id在DOM中必须是唯一的。如果要对公共元素进行分组，请使用类。
在复选框和广播输入上使用change事件，因为它更易于访问（即，它仍适用于仅通过键盘导航网络的用户）
使用事件处理程序中的this关键字来获取引发事件的元素的引用。

考虑到这些问题，这应该对你有用：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" value="US">USA
<input type="checkbox" name="checkbox" value="Rus">Russia
<div id="result"></div>

<script>
  $(":checkbox").change(function() {
    console.log($(this).val());
  })
</script>

＆＃13;

Answer 2

ID应该是唯一的，因此在这种情况下不要使用它们。但是例如您可以选中所有复选框：

＆＃13;

$("input[type=checkbox]").click(function() {
  alert($(this).attr("value"));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" id="checkbox" value="US">USA
<input type="checkbox" name="checkbox" id="checkbox" value="Rus">Russia
<div id="result"></div>

＆＃13;

我还更改了警报内部，因为click将this值设置为受影响的元素。

Answer 3

问题是$("checkbox")没有选择任何内容。如果您将该行更改为$('#checkbox')，则您的代码将适用于第一个复选框。此外，HTML中的ID应该是唯一的。如果您将ID更改为类并将查询更改为$('.checkbox')，则可以使用任何复选框发出警报。

＆＃13;

$(".checkbox").click(function() {
  alert($(this).attr("value"));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" class="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" class="checkbox" value="US">USA
<input type="checkbox" name="checkbox" class="checkbox" value="Rus">Russia
<div id="result"></div>

＆＃13;

Answer 4

您可以使用input[type='checkbox']获取所有复选框输入，而不是尝试通过其ID获取它们。

＆＃13;

$("input[type='checkbox']").click(function() {
  console.log($(this).val());
;
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="checkbox" value="UK">UK
<input type="checkbox" name="checkbox" id="checkbox" value="US">USA
<input type="checkbox" name="checkbox" id="checkbox" value="Rus">Russia
<div id="result"></div>

＆＃13;

尝试使用Jquery获取复选框的值

4 个答案: