【js】操作checkbox radio 的操作总结
摘要
总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来
html
<input type="checkbox" value="1" name="ckTest" id="ckTest1">1</input>
<input type="checkbox" value="2" name="ckTest" id="ckTest2" checked>2</input>
<input type="checkbox" value="3" name="ckTest" id="ckTest3">3</input>
<button id="btnCheck">选中第二个元素</button>
<button id="btnUnCheck">取消选中第二个元素</button>
jquery
// 获取选中的元素
var checkedList = $('input[name=ckTest]:checked');
console.log(checkedList);
// 获取某一元素的选中状态
var $ckTest2 = $('#ckTest2');
$ckTest2.click(function () {
console.log($ckTest2.prop('checked'));
});
// 选中/不选中某一元素
$('#btnCheck').click(function () {
$('input[name=ckTest][value=2]').prop('checked', true);
console.log($ckTest2.prop('checked'));
});
$('#btnCheck').click(function () {
$('input[name=ckTest][value=2]').prop('checked', false);
console.log($ckTest2.prop('checked'));
});
原生js
// 原生js操作
/**
* @description 事件绑定,兼容各浏览器
* @param target 事件触发对象
* @param type 事件
* @param func 事件处理函数
*/
function addEvents(target, type, func) {
if (target.addEventListener) //非ie 和ie9
target.addEventListener(type, func, false);
else if (target.attachEvent) //ie6到ie8
target.attachEvent("on" + type, func);
else target["on" + type] = func; //ie5
};
/**
* @description 事件移除,兼容各浏览器
* @param target 事件触发对象
* @param type 事件
* @param func 事件处理函数
*/
function removeEvents(target, type, func){
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else target["on" + type] = null;
};
// 获取选中的元素
var ckList = document.getElementsByName('ckTest');
var checkedList1 = [];
for (var i = 0 ; i < ckList.length; i++) {
var ck = ckList[i];
if (ck.checked) {
checkedList1.push(ck);
}
}
console.log(checkedList1);
// 获取某一元素的选中状态
var ckTest2 = document.getElementById('ckTest2');
addEvents(ckTest2, 'click', function () {
console.log(ckTest2.checked);
});
// 选中/不选中某一元素
var btnCheck = document.getElementById('btnCheck');
addEvents(btnCheck, 'click', function () {
ckTest2.checked = true;
console.log(ckTest2.checked);
});
var btnUnCheck = document.getElementById('btnUnCheck');
addEvents(btnUnCheck, 'click', function () {
ckTest2.checked = false;
console.log(ckTest2.checked);
});
【js】操作checkbox radio 的操作总结的更多相关文章
- js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
- jquery radio、 checkbox、 select 操作
转载:http://www.haorooms.com/post/checkandselect $("input[id^='code']");//id属性以code开始的所有inpu ...
- checkbox radio 多次操作失效
checkbox radio 多次操作失效 , 将attr替换为prop $(this).attr('checked',true); $(this).attr('checked',false); $( ...
- jquery 操作select,checkbox,radio (整理)
在工作中经经常使用到select,checkbox,radio,今天有点空暇就整理一下,免得以后用的时候还要又一次找. 操作select下拉框 -- 获取值或选中项: 1, $("#sele ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- 原生html、js手写 radio与checkbox 美化
原生html.js手写 radio与checkbox 美化 html <!DOCTYPE html> <html> <head> <meta charse ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery对checkbox的各种操作
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1.根据id获取checkbox $("# ...
- jQuery操作CheckBox的方法(选中,取消,取值)
jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...
随机推荐
- SQL Server 实现Split函数
添加一个表值函数. CREATE function [dbo].[fnSplit] ( ), --要分割的字符串 ) --字符串之间的分隔符 ) ,), TempName )) as begin de ...
- 用Emacs收发邮件
使用Emacs,将尽可能多的工作放到Emacs中来完成,这样可以提高工作效率. 1.安装必要的LISP插件和程序 $sudo apt-get install stunnel4 $sudo apt-ge ...
- springmvc 之 SpringMVC视图解析器
当我们对SpringMVC控制的资源发起请求时,这些请求都会被SpringMVC的DispatcherServlet处理,接着Spring会分析看哪一个HandlerMapping定义的所有请求映射中 ...
- kaggle Titanic心得
Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...
- 解决Jenkins performance-plugin 解析jmeter jtl报告NumberFormatException "timeStamp"
报错日志: Performance: Failed to parse file '/var/lib/jenkins/jobs/Jmeter/jobs/jmeter-test/builds/14/per ...
- jQuery怎样判断按钮是否被选中
方法一: if ($("#checkbox-id")get(0).checked) { // do something } 方法二: if($('#checkbox-id' ...
- 11.page,pagcontext,config对象
- 致命错误:mysql/cli 目录 #include "mysql/client_plugin.h"
居然说没有mysql.h这个文件,可是我确实安装了mysql了啊....... 原来是缺少libmysqlclient-dev,OK安装就是了 ubuntu下 : audo apt-get in ...
- Linux离线安装Ruby详解
很多时候我们会发现,真实的生成环境很多都没有外网,只有内网环境,这个时候我们又需要安装Ruby,则不能提供yum命令进行在线安装了,这个时候我们就需要下载安装包进行离线安装.本文主要简单介绍如果离线安 ...
- hack在微信等webview中无法修改document.title的情况
var $body = $('body'); document.title = '确认车牌'; // hack在微信等webview中无法修改document.title的情况 var $iframe ...