<html>

 <head>

     <script>

         function BatchAddToBasket() {

             var questionNums = '';

             var checkboxs = document.getElementsByName('question');

             for (var i = 0; i < checkboxs.length; i++) {

                 var isChecked = false;

                 if (checkboxs[i].checked) {

                     isChecked = true;

                     break;

                 }

             }

             if (!isChecked) {

                 alert('请至少选择一个选项');

                 return;

             }

             for (var i = 0; i < checkboxs.length; i++) {

                 if (checkboxs[i].checked) {

                     questionNums += checkboxs[i].id;

                     if (i < checkboxs.length - 1)

                     questionNums += ',';

                 }

             }

             alert('选项id：' + questionNums);

         }

         function SelectAll(obj) {

             if (obj.checked) {

                 var checkboxs = document.getElementsByName('question');

                 for (var i = 0; i < checkboxs.length; i++) {

                     checkboxs[i].checked = true;

                 }

             } else {

                 var checkboxs = document.getElementsByName('question');

                 for (var i = 0; i < checkboxs.length; i++) {

                     checkboxs[i].checked = false;

                 }

             }

         }

     </script>

 </head>

 <body>

     <div>

         <input type="checkbox" name="checkboxAll" onclick="SelectAll(this)">

         <button onclick="BatchAddToBasket()">加入试题篮</button>

     </div>

     <div>

         <input type="checkbox" name="question" id=0>

         <input type="checkbox" name="question" id=1>

         <input type="checkbox" name="question" id=2>

     </div>

 </body>

 </html>

JavaScript CheckBox实现全选和部分选择的更多相关文章

  1. html javascript checkbox实现全选功能

    html代码 <input type="checkbox" id="all" />all</input> <input type= ...

  2. JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 所有选择全选被选择

    //点击全选button的事件操作 function selectAll(){ var allcheckBoxs=document.getElementsByName("iTo") ...

  3. js之全选即点击全选标签可选择全部复选框

    目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...

  4. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

  5. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  6. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  7. jquery中checkbox的全选与反选

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  8. 让DuiLib CheckBox支持全选、全不选、非全选三种状态

    原文 https://blog.csdn.net/EveyX/article/details/38433783 DuiLib官方库中的Checkbox只有Checked和Uncheck两种状态,但我们 ...

  9. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

随机推荐

  1. 蓝桥杯 历届试题 PREV-2 打印十字图

    历届试题 打印十字图   时间限制:1.0s   内存限制:256.0MB 小明为某机构设计了一个十字型的徽标(并非红十字会啊),如下所示: 对方同时也需要在电脑dos窗口中以字符的形式输出该标志,并 ...

  2. HDU4006(小根堆)

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  3. Day2-Python基础2---字符编码与转码

    详细内容http://www.cnblogs.com/yuanchenqi/articles/5956943.html 一.编码介绍: 1.基本概念: 在python 2中默认编码是 ASCII,而在 ...

  4. Thread之四：java线程返回结果的方法

    两种方式:一种继承Thread类实现:一种通过实现Callable接口. 第一种方法: 因为实现Thread类的run方法自身是没有返回值的,所以不能直接获得线程的执行结果,但是可以通过在run方法里 ...

  5. canvas绘制中的API

    canvas绘制Z 先贴代码吧: /** * Created by Administrator on 2016/1/26. */ var i; function draw (id){ var canv ...

  6. AngularJS：API

    ylbtech-AngularJS:API 1.返回顶部 1. AngularJS API API 意为 Application Programming Interface(应用程序编程接口). An ...

  7. pthread_cond_wait 详解

    转自:http://www.xuebuyuan.com/2173853.html pthread_cond_wait() 用于阻塞当前线程,等待别的线程使用pthread_cond_signal()或 ...

  8. MySQL中的多表插入更新与MS-SQL的对比

    MySQL多表插入: INSERT INTO tdb_goods_cates (cate_name) SELECT goods_cate FROM tdb_goods GROUP BY goods_c ...

  9. 记录下Linux难记实用的命令

    看文件大小:du -sm * | sort -n 合并多个文件,可以跨文件夹合并:cat *_.txt >> news.txt 给文件改编码:iconv -f GBK -t UTF-8 原 ...

  10. HTML标签详细讲解

    http://www.cnblogs.com/yuanchenqi/articles/5603871.html