jquery - 选中时更改类复选框

Question

我的问题最好用一个例子来说明。我正在使用 jQuery 在 HTML 中设计一个复选框。我的问题是类 customCheckboxChecked 的复选框。打开下拉菜单时，我希望检查此类。但是当我检查其他类时，这个类必须删除。

这是我的代码

$(function() {
  var checkboxs = $('input[type=checkbox]');
  var chboxArr = [];
  checkboxs.each(function() {
    $(this).wrap('<div class="customCheckbox"></div>');
  });
  checkboxs.change(function() {
    var $this = $(this);
    if ($this.is(':checked')) {

      $this.parent().addClass('customCheckboxChecked-amod');
    } else {
      var indexX = chboxArr.indexOf($this.val());

      $this.parent().removeClass('customCheckboxChecked-amod');
    }

  });
});
$('input.checked-titles').on('change', function() {
  $('input.checked-titles').not(this).prop('checked', false);
});
$(function() {
  $(':checkbox[name=toggle]').click(
    function() {

      $('.titles-content').slideToggle('normal');
    }
  );
});

.custom-checkbox {
  margin-top: 0px;
  margin-bottom: 10px;
}

.custom-checkbox {
  width: 100%;
  height: 19px;
}

.customCheckbox {
  width: 13px;
  height: 13px;
  float: left;
  position: relative;
  border-radius: 3px;
  top: 0px;
  border: 1px solid #B2B2B2;
  overflow: hidden;
}

.customCheckbox.customCheckboxChecked-amod {
  position: relative;
  background-color: red;
  border-radius: 3px;
}

.customCheckbox input {
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-checkbox label {
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #3D4045;
  margin-top: 2px;
  margin-left: 0px;
}

.titles-app {
  margin-left: 15px;
}

.titles-content {
  display: none;
}

.titles-app-all {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-ala">
  <form id="checkboxAdd" action="#" method="get" name="#checkboxAdd">
    <div class="custom-checkbox">
      <input type="checkbox" name="chbox" value="hello" />
      <label>hello</label>
    </div>
    <div class="custom-checkbox">
      <input type="checkbox" name="chbox" value="hello" />
      <label>hello </label>
    </div>
    <div class="custom-checkbox titles-app-all">
      <input id="cb2" type="checkbox" name="toggle" value="hello" />
      <label for="cb2">Titles</label>
    </div>
    <div class="titles-content">
      <div class="custom-checkbox titles-app customCheckboxChecked">
        <input type="checkbox" name="chbox" value="All" class="checked-titles" />
        <label>All</label>
      </div>
      <div class="custom-checkbox titles-app">
        <input type="checkbox" name="chbox" value="" />
        <label>Subcategory</label>
      </div>
      <div class="custom-checkbox titles-app">
        <input type="checkbox" name="chbox" value="" />
        <label>Subcategory</label>
      </div>
    </div>
    <div class="custom-checkbox">
      <input id="cb4" type="checkbox" name="chbox" value="hello" />
      <label for="cb4">hello</label>
    </div>

  </form>
</div>

Answer 1

您为“全部”复选框指定了一个特定的类:.checked-titles，这很好，除了这个类名有点困惑...

为什么不给子类分类呢？您可以取消选中“全部”。

旁注，将所有代码放在同一个 $(function() {...}); 中，这是一个“文档就绪”处理程序。

这是您更新的代码:

$(function() {
  var checkboxs = $('input[type=checkbox]');
  var chboxArr = [];
  checkboxs.each(function() {
    $(this).wrap('<div class="customCheckbox"></div>');
  });
  checkboxs.change(function() {
    var $this = $(this);
    if ($this.is(':checked')) {

      $this.parent().addClass('customCheckboxChecked-amod');
    } else {
      var indexX = chboxArr.indexOf($this.val());

      $this.parent().removeClass('customCheckboxChecked-amod');
    }

  });

  // SlideToggle effect on Titles
  $('[name=toggle]').click(function () {
    $('.titles-content').slideToggle('normal');
    $('.titles-content').find("[type='checkbox']").each(function(){
      $(this).prop("checked",true).trigger("change");
    });
  });

  // ALL checked is checking all other checkboxes
  $('.checked-titles').on('change', function() {
    if($(this).is(":checked")){
      $(".titles-content [type='checkbox']").not(this).each(function(){
        $(this).prop('checked', true).trigger("change");
      });
    }
  });

  // Unchecking a subcategory also uncheck "All"
  $(".titles-sub").on("change",function(){
    if(!$(this).is(":checked")){
      $('.checked-titles').prop("checked",false).trigger("change");
    }
  })



});	// End ready

.custom-checkbox{
  margin-top:0px;
  margin-bottom:10px;
}
.custom-checkbox{
  width: 100% ;
  height: 19px;
}
.customCheckbox {
  width: 13px;
  height: 13px;
  float: left;
  position: relative ;
  border-radius: 3px;
  top: 0px;
  border: 1px solid #B2B2B2 ;
  overflow: hidden;
}
.customCheckbox.customCheckboxChecked-amod {
  position: relative;
  background-color:red;

  border-radius: 3px;
}
.customCheckbox input {
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.custom-checkbox label{
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #3D4045;
  margin-top: 2px;
  margin-left: 0px;
}
.titles-app{
  margin-left:15px;
}
.titles-content{
  display:none;
}
.titles-app-all{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="body-ala">
  <form id="checkboxAdd" action="#" method="get" name="#checkboxAdd">
    <div class="custom-checkbox">
      <input type="checkbox" name="chbox" value="hello"/>
      <label>hello</label>
    </div>
    <div class="custom-checkbox">
      <input type="checkbox" name="chbox" value="hello"/>
      <label>hello </label>
    </div>
    <div class="custom-checkbox titles-app-all">
      <input id="cb2" type="checkbox" name="toggle" value="hello"/>
      <label for="cb2">Titles</label>
    </div>
    <div class="titles-content">
      <div class="custom-checkbox titles-app customCheckboxChecked">
        <input type="checkbox" name="chbox" value="All"  class="checked-titles"/>
        <label>All</label>
      </div>
      <div class="custom-checkbox titles-app">
        <input type="checkbox" name="chbox" value="" class="titles-sub"/><!-- Added class here-->
        <label>Subcategory</label>
      </div>
      <div class="custom-checkbox titles-app">
        <input type="checkbox" name="chbox" value="" class="titles-sub"/><!-- Added class here-->
        <label>Subcategory</label>
      </div>
    </div>
    <div class="custom-checkbox">
      <input id="cb4" type="checkbox" name="chbox" value="hello"/>
      <label for="cb4">hello</label>
    </div>

  </form>
</div>