<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. Redis 分布式锁 - 分布式锁的正确实现方式

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  2. 存储过程错误异常处理例子 --> DECLARE EXIT HANDLER FOR SQLEXCEPTION (转)

    刚才一个朋友问到:  mysql  有类似 mssql 退出执行的方法不? 比如我执行到某个条件,下面就终止执行了.  想起以前写的存储过程,找了好久才找到,就发给他,希望对他有所帮助,贴在这里,留作 ...

  3. 上传文件csv 导入功能

    HTML代码: <script> function uploadCsv() { $('#chooseCsvFile').click(); } function doUploadCsv() ...

  4. Apache Htpasswd生成和验证密码

    Assuming you create the password using the following command and "myPassword" as the passw ...

  5. 一些js和JQuery的方法

    取值填值: js: get-- innerText, innerHTML, value;  set-- innerText=?, innerHTML=?, value=?; JQuery: get-- ...

  6. CountDownLatch的介绍和使用

    1.类介绍 java.util.concurrent 类 CountDownLatch java.lang.Object java.util.concurrent.CountDownLatch 一个同 ...

  7. 侯捷STL学习(八)-- 深度探索deque

    layout: post title: 侯捷STL学习(八) date: 2017-07-19 tag: 侯捷STL --- 第十八节 深度探索deque上 duque内存结构 分段连续,用户看起来是 ...

  8. Python unittest excel数据驱动 写入

    之前写过一篇关于获取excel数据进行迭代的方法,今天补充上写入的方法.由于我用的是Python3,不兼容xlutils,所以无法使用copy excel的方式来写入.这里使用xlwt3创建excel ...

  9. 本地测试html文件时CSS效果显示， 但是当django的服务器上运行时效果不显示

    本地测试时各种效果都显示, 但是当在django服务器上测试时, 效果却不显示, 原因是我将css文件放在一个static文件夹里, 没有在settings中设置static_dir选项.将stati ...

  10. Eloquent ORM模型中添加自定义值

    我们都知道通过Laravel中数据库查询出来的模型对象都是基于数据库字段,今天给大家展示一个 Laravel Eloquent ORM 模型特性-附加值不存在于数据表中. 举个简单的栗子,一篇文章(p ...