摘要

总是忘记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 的操作总结的更多相关文章

  1. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  2. jquery radio、 checkbox、 select 操作

    转载:http://www.haorooms.com/post/checkandselect $("input[id^='code']");//id属性以code开始的所有inpu ...

  3. checkbox radio 多次操作失效

    checkbox radio 多次操作失效 , 将attr替换为prop $(this).attr('checked',true); $(this).attr('checked',false); $( ...

  4. jquery 操作select,checkbox,radio (整理)

    在工作中经经常使用到select,checkbox,radio,今天有点空暇就整理一下,免得以后用的时候还要又一次找. 操作select下拉框 -- 获取值或选中项: 1, $("#sele ...

  5. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  6. 原生html、js手写 radio与checkbox 美化

    原生html.js手写 radio与checkbox   美化 html <!DOCTYPE html> <html> <head> <meta charse ...

  7. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  8. jQuery对checkbox的各种操作

    //注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1.根据id获取checkbox $("# ...

  9. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

随机推荐

  1. SQL Server 实现Split函数

    添加一个表值函数. CREATE function [dbo].[fnSplit] ( ), --要分割的字符串 ) --字符串之间的分隔符 ) ,), TempName )) as begin de ...

  2. 用Emacs收发邮件

    使用Emacs,将尽可能多的工作放到Emacs中来完成,这样可以提高工作效率. 1.安装必要的LISP插件和程序 $sudo apt-get install stunnel4 $sudo apt-ge ...

  3. springmvc 之 SpringMVC视图解析器

    当我们对SpringMVC控制的资源发起请求时,这些请求都会被SpringMVC的DispatcherServlet处理,接着Spring会分析看哪一个HandlerMapping定义的所有请求映射中 ...

  4. kaggle Titanic心得

    Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...

  5. 解决Jenkins performance-plugin 解析jmeter jtl报告NumberFormatException "timeStamp"

    报错日志: Performance: Failed to parse file '/var/lib/jenkins/jobs/Jmeter/jobs/jmeter-test/builds/14/per ...

  6. jQuery怎样判断按钮是否被选中

    方法一: if ($("#checkbox-id")get(0).checked) {     // do something } 方法二: if($('#checkbox-id' ...

  7. 11.page,pagcontext,config对象

  8. 致命错误:mysql/cli 目录 #include "mysql/client_plugin.h"

    居然说没有mysql.h这个文件,可是我确实安装了mysql了啊.......  原来是缺少libmysqlclient-dev,OK安装就是了 ubuntu下  :  audo apt-get in ...

  9. Linux离线安装Ruby详解

    很多时候我们会发现,真实的生成环境很多都没有外网,只有内网环境,这个时候我们又需要安装Ruby,则不能提供yum命令进行在线安装了,这个时候我们就需要下载安装包进行离线安装.本文主要简单介绍如果离线安 ...

  10. hack在微信等webview中无法修改document.title的情况

    var $body = $('body'); document.title = '确认车牌'; // hack在微信等webview中无法修改document.title的情况 var $iframe ...