JS 怎么控制 checkbox 选中

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 怎么控制 checkbox 选中相关的知识，希望对你有一定的参考价值。

<script>
window.onload = function()
//获取id 为 check 的隐藏域的值（比如“2,5”）
//将name 为 about ，value为2和5的checkbox 设为选中

</script>
以上代码怎么写？
<input type="hidden" id="check" value="2" />
<input type="hidden" id="check" value="5" />
以上不固定，可多可少但id都为check
<input name="about" type="checkbox" value="1" />1
<input name="about" type="checkbox" value="2" />2
<input name="about" type="checkbox" value="3" />3
<input name="about" type="checkbox" value="4" />4
<input name="about" type="checkbox" value="5" />5

    方法/步骤

    1) 通过js的元素选择器选择对应的元素DOM对象，如通过通过元素ID方式获:

    var el = document.getElementById('元素ID')   

    2) 获取到DOM对象后，可以通过设置该对象的checked属性来修改其选中状态：

    // 设置元素为选中状态el.checked = true;// 设置元素为未选中状态el.checked = false;   

    注意事项

    如果是通过jQuery则可以直接使用$('#元素ID').attr('checked', true)，如果设置为未选中则后面值改为false即可

拓展资料：

javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 [

    是一种解释性脚本语言（代码不进行预编译）。 

    主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

    可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 

    跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、android、ios等）。

    Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。 

参考资料：百度百科：js

 参考技术A

思路：获取checkbox对象，根据value属性设置checkbox的checked属性（true为选中，false为取消选中）。下面实例演示——根据文本框的制定值设置复选框的选中项：

1、HTML结构

<input name="test" type="checkbox" value="1" />item-1<input name="test" type="checkbox" value="2" />item-2<input name="test" type="checkbox" value="3" />item-3<input name="test" type="checkbox" value="4" />item-4<input name="test" type="checkbox" value="5" />item-5<input type="text" id="val"><input type="button" value="确定" onclick="fun()">

2、javascript代码

function fun()    var val = document.getElementById("val").value.split(",");    var boxes = document.getElementsByName("test");    for(i=0;i<boxes.length;i++)        for(j=0;j<val.length;j++)            if(boxes[i].value == val[j])                boxes[i].checked = true;                break                        

3、效果演示

拓展资料

基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    是一种解释性脚本语言（代码不进行预编译）。

    主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

    可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

    跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

    Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

参考资料来源：百度百科：JS

 参考技术B

思路：获取checkbox对象，根据value属性设置checkbox的checked属性（true为选中，false为取消选中）。下面实例演示——根据文本框的制定值设置复选框的选中项：

1、HTML结构

<input name="test" type="checkbox" value="1" />item-1
<input name="test" type="checkbox" value="2" />item-2
<input name="test" type="checkbox" value="3" />item-3<br>
<input name="test" type="checkbox" value="4" />item-4
<input name="test" type="checkbox" value="5" />item-5<br>
<input type="text" id="val"><input type="button" value="确定" onclick="fun()">

2、javascript代码

function fun()
var val = document.getElementById("val").value.split(",");
var boxes = document.getElementsByName("test");
for(i=0;i<boxes.length;i++)
for(j=0;j<val.length;j++)
if(boxes[i].value == val[j])
boxes[i].checked = true;
break



3、效果演示

 参考技术C 我用jquery做的小例子，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function ()
var hiddens = $("input[type='hidden'][name='check']");
$.each(hiddens,function ()
var val=$(this).val();
var checkboxs = $("input[type='checkbox'][name='about'][value="+val+"]");
$.each(checkboxs,function ()
this.checked="checked";
);
);
);
</script>
</head>

<body>
<input type="hidden" name="check" value="1"/>
<input type="hidden" name="check" value="2"/>

<input type="checkbox" name="about" value="1" />1 <br/>
<input type="checkbox" name="about" value="2" />2 <br/>
<input type="checkbox" name="about" value="3" />3 <br/>
</body>
</html>

你说的 “获取id 为 check 的隐藏域的值“ 是不行的，因为ID是唯一标示的，所以我改成了name本回答被提问者采纳 参考技术D JS 怎么控制 checkbox 选中
<script>
window.onload = function()
//获取id 为 check 的隐藏域的值（比如“2,5”）
//将name 为 about ，value为2和5的checkbox 设为选中

</script>
以上代码怎么写？

html,javaScript中怎么控制复选框checkbox的全选，全不选，以及全选中，全选按钮选中，其中一个或者多个没选，则全选按钮不被选中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/jsp/htmtag.jsp"%>

 

<html>
<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>

 

//当全选按钮，选中时，所有复选框被选中，当全选按钮不被选中时，所有的也不被选中
function funSelAll(){
var selects=document.getElementsByName("selOne");
if(document.getElementsByName("selAll")[0].checked==true){
for(var i=0;i<selects.length;i++){
selects[i].checked=true;
}
}else{
for(var i=0;i<selects.length;i++){
selects[i].checked=false;
}
}
}
//当所有的复选框被选中时，全选按钮被选中，当其中任意一个或者多个没被选中时，全选按钮不被选中
function funSelOne(){
var one=document.getElementsByName("selOne");
var all=document.getElementsByName("selAll")[0]
var selCount=0;
var unSelCount=0;
for(var i=0;i<one.length;i++){
 if(one[i].checked==true){
  selCount++;
 }
 if(one[i].checked==false){
  unSelCount++;
 }
 if(selCount==one.length){
  all.checked=true;
 }
 if(unSelCount>0){
  all.checked=false;
 }
}
}

 

function funDelBatch(){
var strsValue="";
var strs=document.getElementsByName("selOne");
if(strs!=null&&strs.length>0){
for(var i=0;i<strs.length;i++){
//----
if(strs[i].checked==true){
strsValue=strsValue+strs[i].value+",";
}
//---

 

}
}
document.form1.action="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDetailGradeBatch&gradeIds="+strsValue;
document.form1.submit();
}
</script>
</head>
<body>
<!--toDetailGradeByName-->
<form action="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDetailGradeByName" method="post" id="form1" name="form1">
<div align="center">
<input type="text" name="gradeName" value="${gradeName}">
<input type="submit" value="查询">
<input type="reset" value="重置">
<br/>

 

<br/>
<input type="button" value="添加" onClick="window.open(‘http://localhost:8080/demo/jsp/grade/gradeAdd.jsp‘);">
<input type="button" value="批量删除" onClick="funDelBatch()">
</div>
<table border="1px"  align="center" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFEE">
<c:if test="${not empty ‘${volists}‘}">
<tr>
<td><input type="checkbox" name="selAll" onClick="funSelAll(this)"></td>
<td>班级编码</td>
<td>班级名称</td>
<td>操作</td>
</tr>
<c:forEach items="${volists}" var="vo">
<tr>
<td><input type="checkbox" name="selOne" value="${vo.gradeId}" onClick="funSelOne(this)"></td>
<td>${vo.gradeId}</td>
<td>${vo.gradeName}</td>
<td>
<a href="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDeleteGrade&gradeId=${vo.gradeId}">删除</a>
<a href="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDetailGrade&gradeId=${vo.gradeId}">修改</a>
</td>
</tr>
</c:forEach>
</c:if>
</table>
</form>

 

</body>
</html>

以上是关于JS 怎么控制 checkbox 选中的主要内容，如果未能解决你的问题，请参考以下文章

winform中datagridview中的checkbox选中问题

如何用JS控制复选框选中，element.checked

如何用js的函数控制checkbox是不是被选中

使用js控制 checkbox 不可用

js控制checkbox

js中怎么获取checkbox选中的值