Javascript 单击复选框并将所有内容保存到localstorage时，请选中前面的复选框

我一直在努力寻找我稍后要解释的内容，但我只找到了其中的一部分，当我试图将它们组合在一起时，总是失败。与其展示我的尝试，不如解释并展示一个我想要的简单例子，希望有人能帮助我。下面是一个例子：

<div class="checkbox a">        
    Class A<br>                 
    <input type="checkbox" name="checkbox"  id="a1" value="a1">                 
    <label>A1</label>
    <input type="checkbox" name="checkbox"  id="a2" value="a2">                 
    <label>A2</label>
    <input type="checkbox" name="checkbox"  id="a3" value="a3">                 
    <label>A3</label> 
</div>                          
                        
<div class="checkbox b">        
    Class B<br>                 
    <input type="checkbox" name="checkbox"  id="b1" value="b1">                 
    <label>B1</label>
    <input type="checkbox" name="checkbox"  id="b2" value="b2">                 
    <label>B2</label>
    <input type="checkbox" name="checkbox"  id="b3" value="b3">                 
    <label>B3</label> 
</div>

<div class="checkbox c">
    Class C<br>                 
    <input type="checkbox" name="checkbox"  id="c1" value="c1">                 
    <label>C1</label>
    <input type="checkbox" name="checkbox"  id="c2" value="c2">                 
    <label>C2</label>
    <input type="checkbox" name="checkbox"  id="c3" value="c3">                 
    <label>C3</label>
    <input type="checkbox" name="checkbox"  id="c4" value="c4">                 
    <label>C4</label> 
    <input type="checkbox" name="checkbox"  id="c5" value="c5">                 
    <label>C5</label>  
</div>

A类

A1
A2
A3
B类

地下一层
地下二层
地下三层
C类

C1
C2
C3
补体第四成份
碳五

第一部分
单击A3时，也会同时选中A2和A1。如果选中B2，则只会选中B2和B1
没有选择全部的按钮。它可能有点像明星收视率？

第二部分
当我刷新或关闭并重新打开链接时，所有复选框仍以我单击它们的方式被选中，因此基本上我希望有一个代码将这些选项保存到LocalStorage，但如果您认为有另一种方法允许我保存选项，而无需将其连接到数据库或类似的东西，那也应该没问题

老实说，我一直很难解释或找到我的想法，所以希望所有这些都是有意义的。在本例中，它只有类A、B和C，但我想制作的东西将有更多的类。因此，无论它有多少个类，它都应该记住所有复选框，并在单击时解锁以前的复选框。

---

e、 g.单击C4时，C1到C3也将被选中

分为两部分的溶液

第1部分： 首先，在html中，我为每个输入元素添加了一个类：

c{type of checkbox[a，b，c]}

。这是为了很容易地识别每一个散装元素。 然后我添加了一些javascript：首先我添加了包含所有类型复选框的数组。然后我创建了一个foreach循环，将

setcheckedboxs（object，allChecks）

函数分配给每个复选框的

onclick

事件。

setcheckedboxs

函数将所有相应的复选框设置为选中或不选中，具体取决于它们是否小于或等于传递的id（

对象

）的编号（

对象[1]

）

让checkBoxTypes=[“a”、“b”、“c”、“ochtend”、“middag”]；
checkBoxTypes.forEach（（项目）=>{
var elements=document.getElementsByClassName（“检查”+项目）；
对于（var i=0；i对于（var i=1；i Ohmy），它就像一个符咒！非常感谢您提供的详细解决方案！很抱歉打扰您。我对编码不太在行。我想知道是否可以取消选中
a1/b1/c1等。
因为现在当您单击它时，它保持选中状态。我想知道的另一件事是，如果我更改ID（例如
ID=“a1”
到
id=“test1”）
它停止工作了，有可能改变它吗？这样我就可以把id改成不仅仅是一个字母和数字，因为现在我似乎只能用+数字来表示Z+数字。（例如
id=“classa1”
/
id=“classab1”
/
id=“classabc1”
/
id=“classabc1”
/
id=“testabc1”
）所以不管我有多少身份证have@Tadakun我会看一看！非常感谢！@Tadakun它现在应该可以工作了，请查看网站以获取完整的工作示例