javascript 全选与全取消功能的实现代码

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function selectAll()
{
var allCheckBoxs = document.getElementsByName("coffee");
var desc = document.getElementById("like");
if(desc.value == "都喜欢")
{
desc.value = "都不喜欢";
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = true;
}
}
else
{
desc.value = "都喜欢";
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = false;
}
}
}
</script>
</head>
<body>
<p>你喜欢那种类型咖啡</p>
<form>
<input type="checkbox" name="coffee" value="cream">蓝山咖啡<br>
<input type="checkbox" name="coffee" value="sugar" >摩卡<br>
<input type="checkbox" name="coffee" value="sugar">拿铁<br>
<input type="checkbox" name="coffee" value="sugar">卡布奇诺<br>
<input type="checkbox" name="coffee" value="sugar">爱尔兰咖啡<br>
<input type="button" id="like" value="都喜欢" onClick="selectAll()">
</form>
</body>
</html>

赞 (0)

相关推荐

  • ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

    ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

    首先看下界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="

  • ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

    ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

    界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 400px; height: 150px"> <p> 请选择语言</p> <asp:CheckBoxList ID="ckbListPro" runat=&q

  • asp.net Javascript获取CheckBoxList的value

    以后我会陆续的写出这段时间中学习到的东西,与大家一起分享.这篇文章也算是工作中的一个笔记吧,希望给遇到同样问题的朋友,一点小小的帮助. 在 开发工作中,因为要做用到CheckBoxList在客户端用js操作,无论js怎样调试,就是无法获取value的值,很是郁闷,后来Google了下,去了趟CodeProject,算是幸运的.我们在网页上放置一下代码: 复制代码 代码如下: <asp:CheckBoxList runat="server" ID="chkDemo&quo

  • 限制CheckBoxList控件只能单选实现代码及演示动画

    限制CheckBoxList控件只能单选实现代码及演示动画

    开发要求,原本对CheckBoxList控件是用来让用户多选的.但现在特殊要求,这个CheckBoxList控件限制只能单选. 哈哈,看看做出来的效果: 为了你也能实现出来,可以参考下面的方法,第一是准备好一个对象"地支"(Terrestrial Branch) TerrestrialBranch.cs 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.W

  • CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

    CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

    某一个时候,CheckBoxList的选择太多,用户需要一个全选或全取消的功能.下面使用Javascript来实现它. 准备好一个对象: MusicType 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// Summary description for MusicType /// </summary> n

  • ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

    ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

    这章内容比较简单,直接上页面代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe6.aspx.cs" Inherits="Recipe6" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

  • jquery实现全选和全不选功能效果的实现代码【推荐】

    网上好多代码都是错的 <!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> <meta http-equiv=&qu

  • jQuery实现CheckBox全选、全不选功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现CheckBox全选.全不选</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/jav

  • JS实现的全选、全不选及反选功能【案例】

    JS实现的全选、全不选及反选功能【案例】

    本文实例讲述了JS实现的全选.全不选及反选功能.分享给大家供大家参考,具体如下: 效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中. html结构代码: <input class = 'check' type="checkbox" > <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox">

  • vue.js实现的全选与全不选功能示例【基于elementui】

    本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o

  • JavaScript实现全选和全不选操作

    本文实例为大家分享了JavaScript实现全选和全不选操作的具体代码,供大家参考,具体内容如下 效果示例 默认状态下: 勾选全选时: 任意取消勾选物品A/物品B/物品C时 实现代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选</title> <script> function myAll() { var all = do

  • JS实现复选框的全选和批量删除功能

    JS实现复选框的全选和批量删除功能

    如图示: 功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选.如果点击批量删除,删除所勾选的商品. <td align="center" width="12%" > <input type="checkbox" id="allChecks" onclick="ckAll()" /> 全选/全不选 </td> //全选 function ckAl

  • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

  • Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

    Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

    ListView控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adapter的用法,加了很多的判断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,还有一个listview的item.xml,相信不用多说 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

随机推荐