获取jQuery中的复选框值
如何在jQuery中获取复选框的值?
#1楼
尝试这个小解决方案:
$("#some_id").attr("checked") ? 1 : 0;
要么
$("#some_id").attr("checked") || 0;
#2楼
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
#3楼
这两种方式正在发挥作用:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
(谢谢@mgsloan )
$('#test').click(function() { alert("Checkbox state (method 1) = " + $('#test').prop('checked')); alert("Checkbox state (method 2) = " + $('#test').is(':checked')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Check me: <input id="test" type="checkbox" />
#4楼
检索复选框值的唯一正确方法如下
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
正如jQuery网站上的官方文档中所解释的那样。 其余的方法与复选框的属性无关,它们检查属性,这意味着它们在加载时测试复选框的初始状态。 简而言之:
- 如果你有元素并且你知道它是一个复选框,你可以简单地读取它的属性,你不需要jQuery(即
elem.checked
)或者你可以使用$(elem).prop("checked")
如果你想要依赖jQuery。 - 如果您需要知道(或比较)元素首次加载时的值(即默认值),正确的方法是
$(elem).is(":checked")
。
答案有误导性,请自行检查以下内容:
http://api.jquery.com/prop/
#5楼
jQuery(".checkboxClass").click(function(){var selectedCountry = new Array();var n = jQuery(".checkboxClass:checked").length;if (n > 0){jQuery(".checkboxClass:checked").each(function(){selectedCountry.push($(this).val());});}alert(selectedCountry);});
#6楼
//By each()
var testval = [];$('.hobbies_class:checked').each(function() {testval.push($(this).val());});//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");//HTML Code<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
例
演示
#7楼
尽管这个问题是要求jQuery解决方案,但这是一个纯粹的JavaScript答案,因为没有人提到它。
没有jQuery:
只需选择元素并访问checked
属性 (返回一个布尔值)。
var checkbox = document.querySelector('input[type="checkbox"]'); alert(checkbox.checked);
<input type="checkbox"/>
以下是收听change
事件的快速示例:
var checkbox = document.querySelector('input[type="checkbox"]'); checkbox.addEventListener('change', function (e) { alert(this.checked); });
<input type="checkbox"/>
要选择已检查的元素,请使用:checked
伪类 ( input[type="checkbox"]:checked
)。
下面是一个示例,它遍历已检查的input
元素并返回已检查元素名称的映射数组。
这里的例子
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {return el.name;
});console.log(checkedElements);
var elements = document.querySelectorAll('input[type="checkbox"]:checked'); var checkedElements = Array.prototype.map.call(elements, function (el, i) { return el.name; }); console.log(checkedElements);
<div class="parent"> <input type="checkbox" name="name1" /> <input type="checkbox" name="name2" /> <input type="checkbox" name="name3" checked="checked" /> <input type="checkbox" name="name4" checked="checked" /> <input type="checkbox" name="name5" /> </div>
#8楼
要获取Value属性的值,您可以执行以下操作:
$("input[type='checkbox']").val();
或者,如果您为其设置了class
或id
,则可以:
$('#check_id').val();
$('.check_class').val();
但是,无论是否检查,这都将返回相同的值,这可能会造成混淆,因为它与提交的表单行为不同。
要检查是否已选中,请执行以下操作:
if ($('#check_id').is(":checked"))
{// it is checked
}
#9楼
只是澄清事情:
$('#checkbox_ID').is(":checked")
将返回'true'或'false'
#10楼
以下是如何将所有选中复选框的值作为数组获取:
var values = (function() {var a = [];$(".checkboxes:checked").each(function() {a.push(this.value);});return a;})()
#11楼
简单但有效,并假设您知道将找到该复选框:
$("#some_id")[0].checked;
给出true
/ false
#12楼
<script type="text/javascript">
$(document).ready(function(){$('.laravel').click(function(){var val = $(this).is(":checked");$('#category').submit();});
});
<form action="{{route('directory')}}" method="post" id="category"><input type="hidden" name="_token" value="{{ csrf_token() }}"><input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}</form>
#13楼
使用以下代码:
$('input[name^=CheckBoxInput]').val();
#14楼
$('.class[value=3]').prop('checked', true);
#15楼
直到2018年的今天,由于api多年来的变化,才引起注意。 removeAttr被删除,不再工作了!
Jquery选中或取消选中复选框:
不好,不再工作了。
$('#add_user_certificate_checkbox').removeAttr("checked");$('#add_user_certificate_checkbox').attr("checked","checked");
相反,你应该这样做:
$('#add_user_certificate_checkbox').prop('checked', true);$('#add_user_certificate_checkbox').prop('checked', false);
获取jQuery中的复选框值相关推荐
- jQuery分别获取选中的复选框值
jQuery分别获取选中的复选框值 原文:jQuery分别获取选中的复选框值 function jqchk(){ //jquery获取复选框值 var s=''; $('input[na ...
- JS jQuery分别获取选中的复选框值
转载地址 http://hi.baidu.com/lipan4/blog/item/8531c62330ee73b04623e886.html <!DOCTYPE html PUBLIC &qu ...
- jquery获取所有选中的复选框
jquery获取所有选中的复选框 提示:在列表中总有一些需求会在表头用到复选框进行批量操作,在此我介绍一下怎么获取到已选中的复选框值 示例:如下所示,获取到数组之后1,通过ajax传给后台进行处理就好 ...
- php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择 在jQuery中,选中checkbox通用的两种方式 ...
- php ajax勾选框提交,jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例...
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
- layui复选框怎么取值_layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML layui.form.checkbox 获取选中 复选框 开关关 开关开 立即提交 JS layui.use('form', function(){ v ...
- html 判断复选框是否选中,jquery如何判断复选框是否选中?
jquery如何判断复选框是否选中?下面本篇文章给大家介绍一下jQuery判断复选框(checkbox)是否选中的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuer ...
- jQuery: 判断checkbox复选框是否被选中
本文介绍如何用jQuery获取checkbox复选框选中状态,或验证是否选中或取消选中复选框. jQuery: 判断checkbox复选框是否被选中 这里我们使用jQuery .is()方法和匹配的c ...
- 在WPF TreeView中使用复选框
目录 介绍 背景 细节决定成败 功能要求 将Smarts放入ViewModel 树视图配置 将TreeViewItem变成ToggleButton Aero主题中的复选框错误 介绍 本文回顾了一个WP ...
最新文章
- 《Science》重磅:终于完成了!迄今为止最完整的人类基因组
- C#中常用的经典文件操作方法
- python爬虫技术可以干什么-Python实战:网络爬虫都能干什么?
- ssh-keygen 的 详解
- 循环链表实现两个多项式相加主要代码
- b样条和三次样条_样条曲线
- hibernate jpa_JPAHibernate替代方案。 如果JPA或Hibernate对于我的项目而言不够好,该怎么办?...
- php foreach 收邮件_php机制本身不提供多线程的操作,有了swoole就不一样了
- 支持向量机(SVM)推导
- 《Algorithms》Comparable 实现排序大全
- Your branch is ahead of ‘origin/main‘ by 1 commit.
- 【题解】【合并序列(水题)P1628】
- 《power BI 视频7》六合一图表案例
- VS2015图形界面YOLO3应用程序
- FSA(有限状态自动机)python代码实现 自然语言处理作业
- 嵌入式编程入门教程,学习设计嵌入式工程师
- 谁是“明日之子”?互动视频的模糊元年
- 在线ARM仿真器知识(嵌入式系统设计师必备)
- Java实现 LeetCode 457 环形数组循环
- hive窗口函数-leg()、lead() 上次下次获取
热门文章
- 如何理解Android中的xmlns
- jquery mobile实例
- IOS开发笔记16-Object-C中的属性
- postman断言测试脚本二 (对数据格式和内容匹配测试)
- 用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架
- php-函数小知识点
- 【LeetCode】154. Find Minimum in Rotated Sorted Array II (3 solutions)
- C# 读取 appconfig文件配置数据库连接的方法
- LIST组件使用总结
- 警告:隐式声明与内建函数‘exit‘不兼容解决方案