javascript - 父子复选框

Question

  <div id="customerServices">
        <input id="s9" type="checkbox" /> Parent element<br/>
            <input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
            <input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
        <br/><br/><br/>

         <input id="s10" type="checkbox" /> Parent element2<br/>
            <input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
            <input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
          <br/><br/><br/>

           <input id="s101" type="checkbox" /> Parent element3<br/>
           <input id="s102" type="checkbox" /> Parent element4<br/>
     </div>

页面上有一些复选框。我有需要:

1. 如果检查了父项，则检查所有子项。
2. 如果未选中所有子项，则取消选中父项。
3. 如果至少检查了一个 child ，则检查 parent 。

这是一些代码，但它不起作用

  $('input[type=checkbox]').change(function() {
        var id = $(this).attr('id');
        var children = $('.parent-' + id);


        //Is this a child
        if (children.length)
        {
           //Is it checked
             if ($(this).is(':checked'))
             {
                 //Find the parent
                 var className = $(this).attr('class');
                 var pId = className.replace("parent-","");

                 //If the parent is not checked, then check this parent
                 if (!$(pId).is(':checked'))
                     $(pId).attr('checked','checked');
             }

            //Is it NOT checked
            else{
                //Do other childs are not checked too?
               //var className2 = $(this).attr('class');
                //$(className2)
            }
        }
        //If this is a parent, then check all childs
        esle{ 
            children.attr('checked', $(this).attr('checked'));

        }


     });

Answer 1

这里我为你写了代码:

var checkboxHandlerObj = {
  init: function() {
    $('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
    $('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked);
  },

  parentClicked: function() {
    if ($(this).attr('checked')) {
      $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').attr('checked', 'checked');
    } else {
      $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').removeAttr('checked');
    }
  },

  childClicked: function() {
    var temp = $(this).attr('class').split('-');
    var parentId = temp[1];

    if ($(this).attr('checked')) {
      $('#' + parentId).attr('checked', 'checked');
    } else {
      var atLeastOneEnabled = false;
      $('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]').each(function() {
        if ($(this).attr('checked')) {
          atLeastOneEnabled = true;
        }
      });
      if (!atLeastOneEnabled) {
        $('#' + parentId).removeAttr('checked');
      }
    }
  }

};

checkboxHandlerObj.init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="customerServices">
  <input id="s9" class="parent" type="checkbox" /> Parent element<br/>
  <input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
  <input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
  <br/><br/><br/>

  <input id="s10" class="parent" type="checkbox" /> Parent element2<br/>
  <input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
  <input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
  <br/><br/><br/>

  <input id="s101" class="parent" type="checkbox" /> Parent element3<br/>
  <input id="s102" class="parent" type="checkbox" /> Parent element4<br/>
</div>

来自 - http://jsfiddle.net/PUWZX/4/