JavaScript简单判断复选框是否选中及取出值的方法

本文实例讲述了JavaScript简单判断复选框是否选中及取出值的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript 获取复选框的值,有朋友在刚开始利用表单提交数据的时候,一般都会遇到表单中有一个特别的元素——复选框,判断它是否选中以及获取它的值 ,好像跟其它的表单元素有点不一样,本代码将为您展示如何获取复选框的值并判断是否被选中。

运行效果如下图所示:

JavaScript简单判断复选框是否选中及取出值的方法

具体代码如下:

<title>JavaScript 获取复选框的值</title>
<script>
function checkbox()
{
var str=document.getElementsByName("box");
var objarray=str.length;
var chestr="";
for (i=0;i<objarray;i++)
{
 if(str[i].checked == true)
 {
  chestr+=str[i].value+",";
 }
}
if(chestr == "")
{
 alert("请先选择复选框~!");
}
else
{
 alert("复选框的值是:"+chestr);
}
}
</script>
选择您的拿手技术:
<input type="checkbox" name="box" id="box1" value="ASP" />ASP
<input type="checkbox" name="box" id="box2" value="PHP" />PHP
<input type="checkbox" name="box" id="box3" value="JSP" />JSP
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" />

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-08-12

javascript实现选中复选框后相关输入框变灰不可用的方法

本文实例讲述了javascript实现选中复选框后相关输入框变灰不可用的方法.分享给大家供大家参考.具体如下: 在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,不可用,看上去会专业一些,也是提升用户体验的一种方式. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>选

javascript实现复选框选中属性

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解. 如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句.有很多种方法来判断一个复选框是否选中. 让我们先来看看原生的javascr

比较实用的复选框的实用javascript脚本

在很多网站里这都是一个很常见的效果,就是点击总分类的复选框,自动选择所有子分类的复选框,或者如果子分类的所有复选框全部被选中则总分类复选框也自动被选中. 这次偶时再msn的网站上偶然看到的,于是自己也试着写了下. function checkAll(str){ var a=document.getElementById("t"+str).getElementsByTagName("input"); var b=document.getElementById(&quo

javascript 复选框选择/全选后特效

运行效果 @charset "utf-8"; .content form { margin:0; } table { border:1px solid #CCC; background:#E4E4E4; } td { border-top:1px solid #CCC; background:#FFF; font-size:12px; } th,td,.quantity { text-align:center; font-family:Arial, Helvetica, sans-se

JavaScript检测并限制复选框选中个数的方法

本文实例讲述了JavaScript检测并限制复选框选中个数的方法.分享给大家供大家参考.具体如下: 这里用JavaScript判断复选框中否选中,同时可以限制复选框的选中个数,这是一个比较实用的JS表单判断示例,复选框的是否选中曾经让很多人纳闷,现在好了,这段代码帮你解决了难题. 运行效果截图如下: 具体代码如下: <html> <head> <title>判断复选框中否选中</title> <script> var check_num = 0;

JavaScript限定复选框的选择个数示例代码

有10个复选框,用户最多只能勾选3个,否则就灰掉所有复选框. (用户再次勾掉复选框时,仍然可以再次选择.) 将可变的部分设置为JS的参数,以实现代码复用. JS代码 第一个参数为复选框的name,第二个参数为最多允许的勾选值. 复制代码 代码如下: function choicetest(name,num){ var choicearr = document.getElementsByName(name); var a=0; for(var i=0;i<choicearr.length;i++)

javascript 设置某DIV区域内的checkbox复选框

<!--HTML代码片段如下: --> 复制代码 代码如下: <div id="div1"> <input type="checkbox" onclick="selectCheckBoxes('div1', this.checked)" />全选<br/> <input type="checkbox" /><br/> <input type=&quo

javascript实现复选框超过限制即弹出警告框的方法

本文实例讲述了javascript实现复选框超过限制即弹出警告框的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>javascript实现复选框超过限制即弹出警告框的方法</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!--// function countChoices(obj) { max = 2; box1 = obj.form.box1.

javascript获取checkbox复选框获取选中的选项

有关javascript 获取checkbox复选框的实例数不胜数,下面的这个示例,纯js实现的 var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var message = ""; for (var i = 0, len = opt

javascript判断单选框或复选框是否选中方法集锦

提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name

js和jquery分别验证单选框、复选框、下拉框

本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen

jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

各种对下拉列表.文本框.复选框.单选框的jquery的相关操作.做为记录和收藏的最好方法. 遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each

js获取单选框或复选框值及操作

复制代码 代码如下: <script> function checkbox() { var str=document.getElementsByName("box"); var objarray=str.length; var chestr=""; for (i=0;i<objarray;i++) {//欢迎来到我们,我们的网址是www.jb51.net,很好记,我们,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载. if(st

用jquery与css打造个性化的单选框和复选框

上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

js实现iPhone界面风格的单选框和复选框按钮实例

本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮.分享给大家供大家参考.具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

vue.js实现单选框、复选框和下拉框示例

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

jquery 操作单选框,复选框,下拉列表实现代码

1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码 代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

使用AngularJS处理单选框和复选框的简单方法

AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

在js中单选框和复选框获取值的方式

复制代码 代码如下: // JavaScript Document function sub1() {      // 用Form名称直接引用form对象 //form1.method = "get"; // 将form名称作为document对象的属性来引用form对象, // 并用user作为form对象的属性来引用名为user的文本框元素对象 // document.form1.user.value = "lisi";              var s1=