三无先森 发表于 2023-8-18 00:31:39

全选文本框示例

一、实现效果


[*]点击全选按钮/取消全选,控制商品的全选或取消
[*]每个商品的复选框都选中后,自动勾上全选按钮,或者商品任何一个复选框没有选中,取消全选

二、思路


[*]就是由大的全选按钮,控制所有的复选框
[*]小的复选框控制大的全选按钮
三、js中小的复选框控制大的全选框,用到了一个css伪类选择器

input:checked
举个例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
   
</head>
<body>
    <input type="checkbox" >
</body>
</html>
四、完整的代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
   
</head>
<body>
    <input type="checkbox" >
</body>
</html>                                              全选                商品                商家                价格                                                                                小米手机                小米                1999                                                        小米净水器                小米                2999                                                        小米电视                小米                3999                                    
来源:https://www.cnblogs.com/bangbangzoutianya/p/17638226.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 全选文本框示例