3个动态复选框可实现通信

3 dynamic checkboxes divs communicating

本文关键字：通信 可实现 复选框 动态 3个      更新时间：2023-09-26

我试图创建3div与复选框里面的通信。下面这个例子https://jsfiddle.net/o04bfazk/我希望能够例如1]，当我检查'1'(它有类A0)自动检查所有复选框在第二个和第三个div也有相同的A0类。然后我希望能够独立地对第三个div做同样的事情。

<script>
    function myFunction(ele){
        var cing = ele.className;
        //alert(cing);
        $('input.'+cing).click(function(){
            //alert('2');
            $('input.'+cing).prop('checked',this.checked)
        });
    }
</script>
<script>
    function myFunctionin(elle){
        var cinci = elle.className.split(' ')[1];
        alert(cinci);
        //var cincirr = elle.className.split(' ')[0];
        $('input.'+cinci).click(function(){
            $('input.'+cinci).prop('checked',this.checked)
        });
    }
</script>

我创建了以下2个函数，第一个工作正常，但是当我添加第三个div和第二个函数时，我得到类冲突，我不知道该怎么做。

试试这个。使用$.each()访问所有相关的复选框。

function myFunction(elle) {
  var cinci = $(elle).attr("class");
  $('input.' + cinci).each(function() {
    $('input.' + cinci).prop('checked', this.checked)
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<section class="content">
  <div class="main-content">
    <form method="post" action="">
      <div class="col-xs-3">
        <div class="pic-container">
          <div class="checkbox">
            <label><span><input type="checkbox" name="" id="" onclick="myFunction(this)" class="A0" value="A0">1</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunction(this)" class="C" value="C">2</span>
              <br>
            </label>
          </div>
        </div>
      </div>
      <br>
      <br>
      <br>
      <div class="col-xs-3">
        <div class="pic-container">
          <div class="checkbox">
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A00" value="A00">11</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A01" value="A01">12</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A02" value="A02">13</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A03" value="A03">14</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A06" value="A06">15</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A07" value="A07">16</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="A0 A08" value="A08">17</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="C C00" value="C00">18</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" onclick="myFunctionin(this)" class="C C01" value="C01">19</span>
              <br>
            </label>
          </div>
        </div>
      </div>
      <br>
      <br>
      <br>
      <div class="col-xs-3">
        <div class="pic-container">
          <div class="checkbox">
            <label><span><input type="checkbox" name="" id="" class="A0 A00" value="A00AA">21</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" class="A0 A00" value="A00AB">22</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" class="A0 A00" value="A00AC">23</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" class="A0 A00" value="A00AD">24</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" class="C C00" value="C00AC">25</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" class="C C00" value="C00AD">26</span>
              <br>
            </label>
            <label><span><input type="checkbox" name="" id="" class="C C00" value="C00AE">27</span>
              <br>
            </label>
          </div>
        </div>
      </div>
      <input type="submit" name="submit" value="Submit">
    </form>
  </div>
</section>

这是你期待的吗?

相关文章：