<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. 在asp.net中使JQuery的Ajax用总结

    自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方 ...

  2. js易犯错误与易混淆的重要知识点

    一:作用域的问题 简单案例1: var a = 1; var n = function () { console.log(a); var a=2; } n(); =>输出undefined原因: ...

  3. 第一篇 PHP开发环境搭建以及多站点配置（基于windows 7系统）

    从今天开始,我将用PHP开发一些小的网站,大家知道LAMP(Linux)组合的优势,使PHP受到广大中小企业的喜欢.使PHP与JAVA,ASP三分天下,PHP具有跨平台性,所以在windows一样是可 ...

  4. 利用TaskScheduler处理Queue、Stack等类型的操作队列（生产者消费者场景）

    我们经常会遇到生产者消费者模式,比如前端各种UI操作事件触发后台逻辑等.在这种典型的应用场景中,我们可能会有4个业务处理逻辑(下文以P代表生产者,C代表消费者): 1. FIFO(先进先出)     ...

  5. HL7 标准及实现指南 必看的网址

    V2: http://hl7book.net/index.php?title=HL7_version_2 包括HL7 的介绍,主要章节,每个版本的变化, 各种语言实现的HL7库,免费HL7工具, 最新 ...

  6. IEEE1588精密网络同步协议（PTP）

    1  引言 以太网技术由于其开放性好.价格低廉和使用方便等特点,已经广泛应用于电信级别的网络中,以太网的数据传输速度也从早期的10M提高到100M,GE,10GE.40GE,100GE正式产品也于20 ...

  7. Python：列表中，增加元素、删除元素、切片、其它

    一.向列表中增加元素 list.append(单个元素):在list列表末端增加一个元素: list.extend([元素1,元素2]):在list列表末端增加多个元素: list.insert(元素 ...

  8. sass实用知识点

    本文总结sass相关核心知识点 说明:本文的内容是,我在开发实践中总结的实用性比较强的sass知识点,其他未涉及的知识,如果对你有作用请自行查阅 sass知识目录 嵌套 注释 SassScript @ ...

  9. leetcode398

    public class Solution { int[] nums; Random rnd; public Solution(int[] nums) { this.nums = nums; this ...

  10. Tiny4412 Linux 内核启动流程

    Linux内核的启动分为压缩内核和非压缩内核两种,这里我们以压缩内核为例.压缩内核运行时,将运行一段解压缩程序,得到真正的内核镜像,然后跳转到内核镜像运行.此时,Linux进入非压缩内核入口,在非压缩 ...