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 相关文章推荐
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
深入理解JS的事件绑定、事件流模型
May 13 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
javascript解析json实例详解
2014/11/05 Javascript
javascript每日必学之多态
2016/02/23 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python使用chardet判断字符编码
2015/05/09 Python
解析Python中while true的使用
2015/10/13 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
企业安全生产责任书
2014/04/14 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
新店开张宣传语
2015/07/13 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL