Question

我正在尝试使用内部的复选框创建3个div。按照这个例子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和第二个函数时，我得到类冲突，我不知道该怎么做。

Answer 1

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

＆＃13;

function myFunction(elle) {
  var cinci = $(elle).attr("class");
  $('input.' + cinci).each(function() {
    $('input.' + cinci).prop('checked', this.checked)
  });
}

＆＃13;

<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>

＆＃13;

这是你期待的吗？

3个动态复选框divs沟通

1 个答案: