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

 更新时间:2020年02月19日 22:13:01   作者:云飞扬12345  
最开始需要获取的是input value值设置checkbox选中状态,由于input value要使用计算业务,后来改造为id,这里就为大家分享一下实现代码,需要的朋友可以参考下

通过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发布订阅模式

    JavaScript 发布订阅模式(Publish/Subscribe Pattern)是一种常用的设计模式,发布订阅模式的核心思想是解耦事件的发生和事件的处理,本文将介绍 JavaScript 发布订阅模式的基本原理、应用场景以及各场景的代码示例,需要的朋友可以参考下
    2023-05-05
  • 解决iframe嵌套第三方网址不能访问的各种报错

    解决iframe嵌套第三方网址不能访问的各种报错

    在一些场景下,我们的网站需要通过iframe标签嵌入第三方厂家的页面,这时候就得通过iframe标签去引入需要嵌入网页的网址了,这篇文章主要给大家介绍了关于解决iframe嵌套第三方网址不能访问的各种报错,需要的朋友可以参考下
    2024-09-09
  • 使用canvas绘图音乐频谱示例及技术分析

    使用canvas绘图音乐频谱示例及技术分析

    这篇文章主要为大家介绍了使用canvas实现音乐频谱示例及技术分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 保姆级Decimal.js使用教程(解决js精度问题)

    保姆级Decimal.js使用教程(解决js精度问题)

    这篇文章主要给大家介绍了关于保姆级Decimal.js使用的相关资料,文中介绍的方法主要解决了js精度问题,decimal.js库它是一个强大的JavaScript库,用于解决浮点数计算精度不准确的问题,需要的朋友可以参考下
    2024-05-05
  • 详解javascript实现瀑布流列式布局

    详解javascript实现瀑布流列式布局

    这篇文章主要介绍了javascript实现瀑布流的两种布局方式,一是绝对式布局、二是列式布局,详细介绍了这两种布局方式的原理,本文重点介绍列式布局,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 12行javascript代码绘制一个八卦图

    12行javascript代码绘制一个八卦图

    本文给大家分享的是使用有限的代码绘制八卦图,算是考核下自己对于javascript的理解,这里推荐给大家,有需要的小伙伴参考下。
    2015-04-04
  • javascript实现电商放大镜效果

    javascript实现电商放大镜效果

    这篇文章主要为大家详细介绍了javascript实现电商放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • picChange 图片切换特效的函数代码

    picChange 图片切换特效的函数代码

    picChange图片切换特效的封装函数,能够根据图片html代码自动生成右下角的数字导航按钮。
    2010-05-05
  • JS继承之借用构造函数继承和组合继承

    JS继承之借用构造函数继承和组合继承

    这篇文章主要为大家详细介绍了JS继承之借用构造函数继承和组合继承,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS实现文字放大效果的方法

    JS实现文字放大效果的方法

    这篇文章主要介绍了JS实现文字放大效果的方法,实例分析了javascript鼠标事件控制css样式的技巧,需要的朋友可以参考下
    2015-03-03

最新评论