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

js单独获取一个checkbox看其是否被选中
投稿:whsnow
字体:[ ] 类型:转载 时间:
这篇文章主要与大家分享js获取一个checkbox看其是否被选中的具体实现,很简单,但很实用,需要的朋友可以参考下
&script language=javascript&
function check(){
var xz=document.getElementById("xz");
alert(xz.checked);
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&input type=checkbox name="xz" id="xz" value=1&
&input type=submit name=s1 value="提交" onclick="return check();"&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具博客分类:
jQuery API :
each(callback) :以每一个匹配的元素作为上下文来执行一个函数。
:checked :匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
//js获取复选框值
var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组
var s='';//如果这样定义变量s中会默认被赋个null值
for(var i=0;i&obj.i++){
if(obj[i].checked) //取到对象数组后,我们来循环检测它是不是被选中
s+=obj[i].value+',';
//如果选中,将value添加到变量s中
//jquery获取复选框值
var chk_value =[];//定义一个数组
$('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框,其中选中的执行函数
chk_value.push($(this).val());//将选中的值添加到数组chk_value中
&%@ page language="java" contentType="text/html" import="java.util.*" pageEncoding="GBK"%&
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
basePath = http
/DWR_checkbox /
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&base href="&%=basePath%&"&
&title&DWR获取浏览器页面信息&/title&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="This is my page"&
&link rel="stylesheet" type="text/css" href="styles.css"&
&script type="text/javascript" src="jquery-1.7.2.js"&&/script&
&script type='text/javascript' src='&%=path%&/dwr/engine.js'&&/script&
&script type='text/javascript' src='&%=path%&/dwr/util.js'&&/script&
&script type='text/javascript' src='&%=path%&/dwr/interface/test.js'&&/script&
&script type='text/javascript' src='&%=path%&/dwr/interface/test1.js'&&/script&
&script type='text/javascript' src='&%=path%&/dwr/interface/userLogin.js'&&/script&
&script type="text/javascript"&
function ceshi1()
test.hasPermission(mydwr("user").value,mydwr("pass").value,
// 使用$()属性获取当前页面输入的用户名和权限的值
function(data)
mydwr("hp1").checked = "checked";
mydwr("hp1").checked =
document.getElementById("boolean1").value =
function ceshi2()
test.hasPermission(dwr.util.getValue("username"),dwr.util.getValue("password"),// 使用DWR中的util.js工具中的属性获取当前页面输入的用户名和权限的值,给后台.java的hasPermission方法的参数赋值,再执行此方法(不是void类型有返回值)得到个返回值。
function(data)
document.getElementById("hp").checked = "checked"; // 使用byId()属性获取当前页面checkbox的checked属性
document.getElementById("hp").checked =
document.getElementById("boolean2").value =
dwr.util.setValue("boolean3",data);
//dwr.util.setValue(boolean3,"哈哈");
dwr.util.setValue(div,data);
//dwr.util.setValue(body,data);
// 用function(data)方法来处理后台.java方法执行后的返回值,存在data变量中,在执行function(data)方法的语句
function invoke1()
dwr.engine.setAsync(false);//&!-- 默认是异步执行的true,设置成false就是同步执行 方法按顺序执行--&
test1.method1(
function(data){
alert(data);
test1.method2(
function(data){
alert(data);
function invoke2(){
test.getArray(
function(data)
//for(var i=0;i&data.i++){
// alert(data[i]);
dwr.util.addOptions(selectid,data);//根据后台数组值填充ID为selectid的列表
function invoke3(){
dwr.util.removeAllRows(tid);//根据tbody的id删除该tbody
function invoke4(){
var a=dwr.util.getText(selectid);
dwr.util.setValue(tdid,a);
function show()
var name = document.getElementById("user").
var pass = document.getElementById("pass").
var obj = new objBean(name,pass);
userLogin.alterUser(obj,
function(data){
if(name == data.username && pass == data.password){
alert("success");
alert("error");
document.getElementById("user").value = data.
document.getElementById("pass").value = data.
function objBean(name,pass)
this.username =
this.password =
function go_to()
$('#first_jsp').show();
test.getInclude(function(data){
$('#first_jsp').html(data);
function go_to_iframe()
$("#myframe1").show();
test.getIncludeBean(function(data){
$('#myframe1').attr('src',"&%=basePath%&"+data);
function getInfo(){
//js获取复选框值
var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组
var s='';//如果这样定义变量s中会默认被赋个null值
for(var i=0;i&obj.i++){
if(obj[i].checked) //取到对象数组后,我们来循环检测它是不是被选中
s+=obj[i].value+',';
//如果选中,将value添加到变量s中
alert(s == '' ? '你还没有选择任何内容!' :s);
dwr.util.setValue(tdid,s);
//jquery获取复选框值
var chk_value =[];//定义一个数组
$('input[name="interest"]:checked').each(function(){//遍历每一个名字为interest的复选框,其中选中的执行函数
chk_value.push($(this).val());//将选中的值添加到数组chk_value中
alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value);
dwr.util.setValue(checkboxInfo,chk_value);
&body id="body"&
&table id="tableid" border="1" align="center"&
&tr&&td&用户名:&/td&&td&&input id="user" type="text" name="username"/&&/td&&/tr&
&tr&&td&密码:&/td&&td&&input id="pass" type="text" name="password"/&&/td&&/tr&
&td&&input id="getInfo" type="button" value="获取信息" onclick="show()"/&&/td&
&td&&input type="reset" value="重置" /&&/td&
&tbody id="tid"&
&td colspan="2" &
&input id="hp1" type="checkbox" name="hpname" &测试权限&br&
&input type="button"name="button"value="测试1" onclick="ceshi1()"&
返回值:&input id="boolean1" type="text" /&
&input id="hp" type="checkbox" name="hpname" &测试权限&br&
&input type="button"name="button"value="测试2" onclick="ceshi2()"&
返回值:&input id="boolean2" type="text" /&
dwr.util.setValue:&input id="boolean3" type="text" /&
&div id="div" & 这是一个div标签&/div&
&td id="tdid"colspan="2" &修改此行值&/td&
&input type="button"name="button"value="异步调用测试" onclick="invoke1()"&
&input type="button"name="button"value="加载Array值" onclick="invoke2()"&
&input type="button"name="button"value="删除所有行" onclick="invoke3()"&
&input type="button"name="button"value="修改行值" onclick="invoke4()"&
&select id="selectid"&&/select&
&input type="button"name="button"value="框架(iframe)中加载bean.jsp" onclick="go_to_iframe()"&
&input type="button"name="button"value="DIV中加载first.jsp" onclick="go_to()"&
&iframe id="myframe1" style="width:500;height:200;border:10padding:0display:none"
&&/iframe&
&div id="first_jsp" style="width: 100%; height: display:none"&&/div&
&input type="checkbox" name="interest" value="VC" /&VC
&input type="checkbox" name="interest" value="VB" /&VB
&input type="checkbox" name="interest" value="VFoxpro" /&VFoxpro
&input type="checkbox" name="interest" value="VJava" /&VJava
&input type="checkbox" name="interest" value="BC" /&BC
&input type="checkbox" name="interest" value="Cobol" /&COobol
&input type="checkbox" name="interest" value="Java" /&Java
&input type="checkbox" name="interest" value="Delphi" /&Delphi
&input type="button" value="获取复选框值" onclick="getInfo()"&
&div id="checkboxInfo" style="width: 100%; height: display:block"&&/div&
浏览 32075
浏览: 155862 次1、checkbox list选择
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&head runat="server"&
&title&&/title&
&script src="Scripts/jquery-1.7.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
$("#btnCheckAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", true);
$("#btnCheckNone").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", false);
$("#btnCheckReverse").bind("click", function () {
$("[name = chkItem]:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
$("#btnSubmit").bind("click", function () {
var result = new Array();
$("[name = chkItem]:checkbox").each(function () {
if ($(this).is(":checked")) {
result.push($(this).attr("value"));
alert(result.join(","));
&input name="chkItem" type="checkbox" value="今日话题" /&今日话题
&input name="chkItem" type="checkbox" value="视觉焦点" /&视觉焦点
&input name="chkItem" type="checkbox" value="财经" /&财经
&input name="chkItem" type="checkbox" value="汽车" /&汽车
&input name="chkItem" type="checkbox" value="科技" /&科技
&input name="chkItem" type="checkbox" value="房产" /&房产
&input name="chkItem" type="checkbox" value="旅游" /&旅游
&input id="btnCheckAll" type="button" value="全选" /&
&input id="btnCheckNone" type="button" value="全不选" /&
&input id="btnCheckReverse" type="button" value="反选" /&
&input id="btnSubmit" type="button" value="提交" /&
2、checkbox table选中
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&head runat="server"&
&title&&/title&
&style type="text/css"&
border-collapse:
border: 1px solid #
&script src="Scripts/jquery-1.7.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
// chkAll全选事件
$("#chkAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", this.checked);
// chkItem事件
$("[name = chkItem]:checkbox").bind("click", function () {
var $chk = $("[name = chkItem]:checkbox");
$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
&table id="tb"&
&input id="chkAll" type="checkbox" /&
&input name="chkItem" type="checkbox" value="今日话题" /&
&input name="chkItem" type="checkbox" value="视觉焦点" /&
&input name="chkItem" type="checkbox" value="财经" /&
&input name="chkItem" type="checkbox" value="汽车" /&
&input name="chkItem" type="checkbox" value="科技" /&
&input name="chkItem" type="checkbox" value="房产" /&
&input name="chkItem" type="checkbox" value="旅游" /&
阅读(...) 评论()}

我要回帖

更多关于 elementui 复选框 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信