首页 > 其他分享 >购物车 复选框和反选 全部选择案例

购物车 复选框和反选 全部选择案例

时间:2023-11-02 15:56:53浏览次数:35  
标签:checked 反选 购物车 every 选中 let 复选框 true

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购物车复选框的选中 反选的案例</title>
    </head>
    <body>
        All <input class="all" name="Checkbox" type="checkbox">
        <ul>
            <div class="checkbox-list">
                <input name="Checkbox" type="checkbox" >
                <input name="Checkbox" type="checkbox" >
                <input name="Checkbox" type="checkbox">
            </div>
            
        </ul>
        
        <script>
            let all = document.querySelector('.all')
            
            let every = document.querySelectorAll('.checkbox-list input')
            console.log(every)
            //大复选框选中  小的全部选中
            all.addEventListener('click',function(){
                
                for (let i = 0; i < every.length; i++) {
                    
                    every[i].checked = this.checked
                }
            })
             
            //下面小的 如果全选 那么 大复选框也选中
            for (let i = 0; i < every.length; i++) {
                every[i].addEventListener('click',function(){
                    for (var j = 0; j < every.length; i++) {
                        if(every[j].checked != true){
                            all.checked = false
                            return true
                        }else{
                            all.checked = true
                            return true
                        }
                    }
                })
            }
             
        </script>
        
    </body>
</html>

 

标签:checked,反选,购物车,every,选中,let,复选框,true
From: https://www.cnblogs.com/xm666/p/17805587.html

相关文章

  • 封装a-select下拉增加复选框,支持全选和取消全选
    由于select下拉框中内容过多,使用下拉一个一个选取太过于麻烦,所以在下拉中增加全选和取消全选操作,增加复选框选择。版本  vue3   [email protected].我们在看AntDesignVue官网中,可以发现这个dropdownRender,它可以定义下拉框中的内容。 2.封装vue组件<template......
  • 记录--仿加入购物车飞入动画效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助近期对管理后台相关功能进行优化,其中导出功能涉及到查询数据过多导致查询很慢问题,决定采用点击后加入到下载中心方式,既解决了接口慢等待问题,也方便后期各种文件的重复下载,一举多得~功能上很好实现,调接口就可以了,主......
  • QT 菜单中添加Qcheckbox复选框
    //回放autowidget=newQWidget;{autocheckbox=newQCheckBox("回放");autolayout=newQHBoxLayout;layout->addWidget(checkbox);layout->setContentsMargins(5,1,5,1);widget->setLayout(l......
  • 一个更复杂的 PHP 代码示例,我将展示一个购物车系统的基本实现,它包括商品类、购物车类
    一个更复杂的PHP代码示例,我将展示一个购物车系统的基本实现,它包括商品类、购物车类和一些基本的操作方法。<?php//定义商品类classProduct{private$name;private$price;publicfunction__construct($name,$price){$this->name=$name;$this->pri......
  • 将复选框设置为已选中状态,使用jQuery
    内容来自DOChttps://q.houxu6.top/?s=将复选框设置为已选中状态,使用jQuery我想使用jQuery来选中一个复选框,就像这样:$(".myCheckBox").checked(true);或者$(".myCheckBox").selected(true);有这样的方法吗?现代jQuery使用.prop():$('.myCheckbox').prop('checked',......
  • WINCCV7.5SP2VBS+复选框做趋势曲线显示隐藏功能
    这是我在新浪博客发表过的一篇学习笔记,在这里也记录一遍。新浪博客地址是WINCCV7.5SP2VBS+复选框做趋势曲线显示隐藏功能_来自金沙江的小鱼_新浪博客(sina.com.cn) 新建一个WINCC项目,新建3个内u浮点数变量,2个BOOL变量,设置初始值。设置变量记录,关联这5个变量,启动变量记录。新建......
  • 在jQuery中如何检查一个复选框是否被选中?
    内容来自DOChttps://q.houxu6.top/?s=在jQuery中如何检查一个复选框是否被选中?我需要检查复选框的checked属性,并根据该属性使用jQuery执行操作。例如,如果age复选框被选中,那么我需要显示一个文本框以输入age,否则隐藏该文本框。但是以下代码默认返回false:if($('#isAgeSelec......
  • 直播系统源代码,单选按钮和复选框
    直播系统源代码,单选按钮和复选框 <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:background="@drawable/background&qu......
  • 苍穹外卖-第六章购物车
    1.缓存菜品1.1问题说明用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大。结果:系统响应慢、用户体验差1.2实现思路通过Redis来缓存菜品数据,减少数据库查询操作。缓存逻辑分析:每个分类下的菜品保存一份缓存数据数据库中......
  • 使用tkinter创建复选框
       tkinter库在开发客户端软件中应用广泛。今天介绍使用tkinter库中的checkbutton控件创建复选框。直接用实例来演示它的用法。#encoding=utf-8#Author:HaiFeng#Date:2023.09.20'''多复选框应用'''#引入第三方库fromtkinterimport*#创建调用功能函数deff......