Jquery中的checkbox 及radio的问题
在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例:
一、checkbox
<input id="check1" class="othercheck" type="checkbox" name="othercheck" value="1">1
1.判断单个已知checkbox是否选中
var ischeck=$("#check1").is(':checked');//获取此checkbox是否选中,被选中则 ischeck=true 反之为 false
2.判断多个name=test的checkbox是否选中
function judgechecked(){
var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象,返回数组
//取到对象数组后,我们来循环检测它是不是被选中
var s='';
for(var i=0; i<obj.length; i++){
if(obj[i].checked)
s+=obj[i].value+','; //如果选中,将value添加到变量s中
}
//那么现在来检测s的值就知道选中的复选框的值了
alert(s==''?'你还没有选择任何内容!':s); //条件运算符
}
3.//jquery获取复选框值
function getcheckval(){
var chk_value =[];
$('input[name="test"]:checked').each(function(){
chk_value.push($(this).val()); //
});
alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value);
}
或者获得拼接字符串
function getcheckval(){
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+",";
})
alert(str);
})
4.全选
1)点击button全选
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
2)选中checkbox全选及取消
<input id="checkAll" type="checkbox" onclick="checkAll('checkbox')" name="checkAll">//选中触发checkAll()函数,选中所有name为checkbox的复选框
function checkAll(checkname){
var checkid = document.getElementById("checkAll")
var check = document.getElementsByName(Obj)
if (checkid.checked){
$("[name='checkname']").attr("checked",'true');//全选
}else{
$("[name='checkname']").removeAttr("checked");//取消全选
}
}
5.给checkbox赋值
$('input:checkbox').eq(索引值).attr('checked','true');//索引值=0,1,2
$('input:checkbox').slice(0,2).attr('checked','true');//同时选中第一个和第三个checkbox
$('input:checkbox:first').attr('checked','checked');//设置第一个checkbox为选中值
$('input:checkbox:last').attr('checked','checked');//设置第一个checkbox为选中值
$('input:checkbox[value='1']').attr('checked','true');//根据value值设置checkbox为选中
$("input").attr("checked","checked");
$("input").attr("checked",true);
6.删除操作
$('input:checkbox[value='1']').remove();//删除value=1的checkbox
$('input:checkbox').eq(索引值).remove();//索引值=0,1,2,删除第几个checkbox
二、radio
<input id="radiono" type="radio" value="1" name="isused">
var isused=$('input:radio[name="isused"]:checked').val();//获取radio的value值
分组: 只要name一样,就是一组的,即一组中只能选择一个
<input type="radio" id="radio1" checked="checked" name="group1" />radio1
<input type="radio" id="radio2" name="group1" />radio2
<input type="radio" id="radio3" name="group1" />radio3
var group1 = $("[name='group1']").filter(":checked");
alert(group1.attr("id"));
根据id选中radio
$("#radio2").attr("checked", "checked");
根据id取消选中radio
$("#radio1").removeAttr("checked");
一组中某一个被选中触发函数
$("[name='group1']").on("change",
function (e) {
console.log($(e.target).val()); //得到选中值的value
}
);
任何元素都可以有点击事件onclick,在onclick中给函数传值 如
<input id="57*1" type="radio" onclick="chkRadio(this)" value="5" name="radio1">
var flag = true;
function chkRadio(checkedradio) {//点击选中,再点击取消选中
checkedradio.checked = flag;
flag = !flag;
}
<img id="tttxx" onclick="isShowtheHidden(this.id);" src="/webStatic/image/back/hfk.png" style="margin-top: -20px;float:right;">
function isShowtheHidden(id){
id为被选中radio的id值
}
Jquery中的checkbox 及radio的问题的更多相关文章
- jquery中选择checkbox拼接成字符串,然后到后台拆分取值
jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...
- Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox. Radiobutton . DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的 ...
- js jquery中判断checkbox是否被选中的方法
在js中: document.getElementById("checkboxID").checked 返回true或者false jQuery中: $("input ...
- 二十四、小程序中改变checkbox和radio的样式
来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...
- jQuery中的checkbox问题
一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Microsoft.Office.Interop.Excel 读取 excel 中的 checkbox 和 radio
using Excel = Microsoft.Office.Interop.Excel; Excel.Application excelapp = new Excel.Application(); ...
- Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值
1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $ ...
- Jquery中input:type=radio的监听,获取设置值
一.html <div id='demo'> <input type='radio' name='sex' value='男' > <input type='radio' ...
随机推荐
- 【C#】项目优化实战
[C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...
- 利用Native Client OLEDB 11 高效率地对SQL SERVER 进行查询和插入操作
前言: 鄙司原始用的都是ADO来访问数据库,而我现在着手的项目是从我的GPS历史数据库中,取出历时数据的一个接口,一个DLL.用ADO写完之后,测试下来,平均4000条的数据,需要 180 毫秒左右. ...
- 去除inline-block元素间间距的N种方法
这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...
- Visual Studio Entity Framework (EF) 生成SQL 代码 性能查询
Visual Studio Entity Framework (EF) 生成SQL 代码 性能查询 SQL 中,有SQL Server Profiler可以用来查询性能以及查看外部调用的SQL ...
- CSS浮动布局与菜单栏设计
公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...
- redis 在linux下的安装
背景:在项目互联网项目开发中我们经常需要缓存热点数据,在做热点数据缓存时有2个常用的方案 redis简介redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型 ...
- NC nc5.x笔记(编辑中)
一.设置卡片界面下 金额字段负数为红色! /** * 设置卡片界面下 金额字段负数为红色! */ private void repaintBodyMoneyColor(){ if(!isListPan ...
- 学习总结relative和absolute
之前对于absolute和relative不了解,现在整理 先设置relative再设置absolute 因为父不设置relative 那么子会向上寻找祖先元素,看是否设置relative.如果有则相 ...
- Windows Server 2003 服务器备份和恢复技巧
1.系统备份与恢复 现在很多中小型企业服务器并没有采用专业的服务器备份机制进行备份,对于个人站长而言这似乎更不可能.但是再好的服务器维护人员总有失误的时候,为了防止万一我们最好还是采用一些备 ...
- 通过实现Countable接口来调用count函数
周六我一大早就来到公司,还有些客户工作没有收尾,还有写文档没写,还有写计划需要完善,我得抓紧.到了下午我发现大家陆陆续续的都到公司来了,有几个兄弟一来就开始工作了,每当有人自愿投入某一项工作时,我基本 ...