JS通过识别id、value值对checkbox设置选中状态


Posted in Javascript onFebruary 19, 2020

通过value值设置checkbox选中

html

<input type="checkbox" name="ChekRole" value="1" >超级管理员
<input type="checkbox" name="ChekRole" value="2">学生
<input type="checkbox" name="ChekRole" value="3">教师

js实现代码

<script type="text/javascript">
 var name = "1,2,3";
 var names = name.split(",");
 var inputs = document.getElementsByTagName('input');
	
	 for (var i =0;i<inputs.length;i++) {
 for (var n =0;n<names.length;n++) {
  if (names[n]===inputs[i].value) {
  inputs[i].checked = true;
  }
 }
 } 
</script>

jquery实现代码

<script type="text/javascript">
var name = "1,2";
$(name.split(",")).each(function (i,e){
 $("input[name='ChekRole'][value='"+e+"']").prop("checked",true);
})
</script>

id值设置checkbox选中

html

<input type="checkbox" id="test1" name="ChekRole" value="1" >超级管理员
<input type="checkbox" id="test2" name="ChekRole" value="2">学生
<input type="checkbox" id="test3" name="ChekRole" value="3">教师

js实现代码

<script type="text/javascript">
document.oncontextmenu = function(){return false;}
 var name = "test1,test2"
 var names = name.split(",")
 var inputs = document.getElementsByTagName('input')
	 for (var i =0;i<inputs.length;i++) {
 for (var n =0;n<names.length;n++) {
  if (names[n]===inputs[i].id) {
  inputs[i].checked = true;
  }
 }
 }
</script>

jquery实现代码

<script type="text/javascript">
var name = "test1,test2";
$(name.split(",")).each(function (i,e){
 $("input[name='ChekRole'][id='"+e+"']").prop("checked",true);
})
</script>

通过数值对应给checkbox的设置默认属性值(勾选状态)

//初始化默认已拥有的权限
$(function () {
 /*  获取所有复选框的值   
 var box = document.getElementsByName("user-Character-0-0-0");
 var objArray = box.length;
 var chestr="";

 for(var i=0;i<objArray;i++){
  chestr+=box[i].value+",";
 }
 alert(chestr);*/

 var roleName = $("#roleName").val();//获取需要初始化的数值
 //把已经拥有的复选框的属性值变成true
 var arrStr = roleName.split(",");//转化成数组
 for (var i = 0; i < arrStr.length; i++) {
 $("input[Value=" + arrStr[i] + "]").attr("checked", "checked");//根据value给checkbox设置默认值(勾选)
 }
});

到此这篇关于JS通过识别id、value值对checkbox设置选中状态的文章就介绍到这了,更多相关根据id、value值设置checkbox状态内容请搜素三水点靠木以前的文章或下面相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
JS中Location使用详解
May 12 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 #Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 #Javascript
详解Vue 单文件组件的三种写法
Feb 19 #Javascript
vue中 v-for循环的用法详解
Feb 19 #Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 #Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 #Javascript
ES6中new Function()语法及应用实例分析
Feb 19 #Javascript
You might like
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
使用eAccelerator加密PHP程序
2008/10/03 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python优先队列实现方法示例
2017/09/21 Python
python使用RNN实现文本分类
2018/05/24 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
企业转让协议书(范文2篇)
2019/08/15 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
再谈python_tkinter弹出对话框创建
2022/03/20 Python