要动态显示复选框

时间：2017-01-04 12:18:31

标签： jquery ajax

enter image description here下面给出的是我的PHP代码，它由复选框和表单组成，无论用户选择父项还是写入文本框，文本框中的书写值必须显示为复选框，并且应显示在下面父复选框。这不应该影响代码，在选择父复选框时，必须选中所有子复选框，选择单个子框时，必须选中父复选框，当不选择子项时，也不能选择父项：

这是add_checkbox.php 

<!doctype html>
<html>
 <head>
  <title>Adding checkbox</title>
  <link rel="stylesheet" type="text/css" href="css/add_checkbox.css" />
 </head>
 <body>
  <div id="maindiv">
   <br /><br />
   <div id="checkbox_div">
    <div id="checkbox_subdiv1">
     <p>Manage Permission</p>
    </div>
    <div id="subdiv2">
     <form action="#" method="POST" id="myform">
      <br />
      <select id="dropdown">
       <option>subsubfgh</option>
      </select>
      <br />      
      <ul>
       <li><!--list of Property checkbox-->
        <input type="checkbox" class="parent" />Property
         <ul>
          <li>
           <input type="checkbox" class="child" />Edit Property
          </li>
          <li>
           <input type="checkbox" class="child" />Remove Property
          </li>
          <li>
           <input type="checkbox" class="child" />Add Property
          </li>
         </ul>
       </li><!--end of Property checkbox-->
       <li><!--list of Testimonial checkbox-->
        <input type="checkbox"  class="parent" />Testimonial
         <ul>
          <li>
           <input type="checkbox"  class="child" />Add
          </li>
          <li>
           <input type="checkbox" class="child" />Remove
          </li>
          <li>
           <input type="checkbox" class="child" />View
          </li>
          <li>
           <input type="checkbox" />Edit
          </li>
         </ul>
       </li><!--end of testimonial checkbox-->
       <li><!--list of users checkbox-->
        <input type="checkbox" class="parent" />Users
         <ul>
          <li>
           <input type="checkbox" class="child" />Edit User
          </li>
          <li>
           <input type="checkbox" class="child" />View User List
          </li>
          <li>
           <input type="checkbox" class="child" />Add User
          </li>
         </ul>
       </li><!--end of users checkbox-->
       <li><!--list of membership checkbox-->
        <input type="checkbox" class="parent" />Membership
         <ul>
          <li>
           <input type="checkbox" class="child" />Edit Membership
          </li>
          <li>
           <input type="checkbox" class="child" />Remove Membership
          </li>
          <li>
           <input type="checkbox" class="child" />Add Membership
          </li>
         </ul>
       </li><!--end of membership checkbox-->
      </ul>
     </form>
    </div>
   </div>
  </div>
  <div id="form_div">
  <br /><br />
   <div id="form_sub_div1">
    <br /><br />
    <form>
     Parent:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <select id="select_parent" name="select_parent">
      <option>Property</option>
      <option>Edit Property</option>
      <option>Remove Property</option>
      <option>Add Property</option>
      <option>Testimonial</option>
      <option>Add</option>
      <option>Remove</option>
      <option>View</option>
      <option>Edit</option>
      <option>Users</option>
      <option>Edit User</option>
      <option>View User List</option>
      <option>Add User</option>
      <option>Membership</option>
      <option>Edit Membership</option>
      <option>Remove Membership</option>
      <option>Add Membership</option>
     </select>
     <br /><br />
     Add New Checkbox:
     <input type="text" name="input_checkbox" />
     <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="submit" value="Add" id="add_button" />
    </form>
   </div>
  </div>
 </body>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/checkbox.js"></script>
</html>

这是add_checkbox.js 

$(function() {
  $("li:has(li) > input[type='checkbox']").change(function() {
    $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  });
  $("input[type='checkbox'] ~ ul input[type='checkbox']").change(function() {
    $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
  });
});

这是add_checkbox.css 

#maindiv{width:100% height:700px; margin:auto;}
 #checkbox_div{width:250px; height:100%; float:left; background-color:gray; border:1px solid black;}
 #checkbox_subdiv1{width:250px; height:7%; margin:auto; border:1px solid black;}
 input[type="checkbox"]{cursor:pointer;}
  #dropdown{margin-left:17%; cursor:pointer;}
  p{position:relative; left:40px; top:1%;}
  ul li{list-style-type:none;}
 #form_div{background-color:lightgreen; width:1018px; height:463px; float:left;}
  #form_sub_div1{background-color:lightyellow; width:350px; height:180px; margin:auto; border:1px solid black;}
   #select_parent{cursor:pointer;}
   #add_button{cursor:pointer;}

以下给出的是输出，当用户添加新复选框时，复选框必须显示在相应的父

下方

1 个答案:

答案 0 :(得分：1)

我在您的HTML中做了一些小改动。我在父复选框中添加了name属性。我建议对所有复选框都一样。

<强> HTML 

<!doctype html>
<html>
 <head>
  <title>Adding checkbox</title>
  <link rel="stylesheet" type="text/css" href="hello.css" />
 </head>
 <body>
  <div id="maindiv">
   <br /><br />
   <div id="checkbox_div">
    <div id="checkbox_subdiv1">
     <p>Manage Permission</p>
    </div>
    <div id="subdiv2">
     <form action="#" method="POST" id="myform">
      <br />
      <select id="dropdown">
       <option>subsubfgh</option>
      </select>
      <br />      
      <ul>
       <li><!--list of Property checkbox-->
        <input type="checkbox" class="parent" name="Property"/>Property
        <ul>
          <li>
           <input type="checkbox" class="child" />Edit Property
          </li>
          <li>
           <input type="checkbox" class="child" />Remove Property
          </li>
          <li>
           <input type="checkbox" class="child" />Add Property
          </li>
         </ul>
       </li><!--end of Property checkbox-->
       <li><!--list of Testimonial checkbox-->
        <input type="checkbox"  class="parent" name='Testimonial'/>Testimonial
         <ul>
          <li>
           <input type="checkbox"  class="child" />Add
          </li>
          <li>
           <input type="checkbox" class="child" />Remove
          </li>
          <li>
           <input type="checkbox" class="child" />View
          </li>
          <li>
           <input type="checkbox" />Edit
          </li>
         </ul>
       </li><!--end of testimonial checkbox-->
       <li><!--list of users checkbox-->
        <input type="checkbox" class="parent" name='Users'/>Users
         <ul>
          <li>
           <input type="checkbox" class="child" />Edit User
          </li>
          <li>
           <input type="checkbox" class="child" />View User List
          </li>
          <li>
           <input type="checkbox" class="child" />Add User
          </li>
         </ul>
       </li><!--end of users checkbox-->
       <li><!--list of membership checkbox-->
        <input type="checkbox" class="parent" name='Membership'/>Membership
         <ul>
          <li>
           <input type="checkbox" class="child" />Edit Membership
          </li>
          <li>
           <input type="checkbox" class="child" />Remove Membership
          </li>
          <li>
           <input type="checkbox" class="child" />Add Membership
          </li>
         </ul>
       </li><!--end of membership checkbox-->
      </ul>
     </form>
    </div>
   </div>
  </div>
  <div id="form_div">
  <br /><br />
   <div id="form_sub_div1">
    <br /><br />
    <form>
     Parent:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <select id="select_parent" name="select_parent">
      <option>Property</option>
      <option>Edit Property</option>
      <option>Remove Property</option>
      <option>Add Property</option>
      <option>Testimonial</option>
      <option>Add</option>
      <option>Remove</option>
      <option>View</option>
      <option>Edit</option>
      <option>Users</option>
      <option>Edit User</option>
      <option>View User List</option>
      <option>Add User</option>
      <option>Membership</option>
      <option>Edit Membership</option>
      <option>Remove Membership</option>
      <option>Add Membership</option>
     </select>
     <br /><br />
     Add New Checkbox:
     <input type="text" name="input_checkbox" />
     <br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type='button' value="Add" id="add_button" />
    </form>
   </div>
  </div>
 </body>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="hello.js"></script>
</html>

.js文件 

$(document).ready(function() {
    $('input:button').on('click', function() {

        // get the name of the parent selected from the dropdown
        var chosen_parent = $('#select_parent option:selected').text();

        // get text from 'Add New Checkbox' textbox
        var child_name = $(':text').attr("name", "input_checkbox").val();

        // create a checkbox to append under the parent checkbox
        var temp_checkbox = '<li><input type="checkbox" name=' + child_name +'>' + child_name + '</li>';

        // appending the checkbox under the selected parent
        $(':checkbox.parent').filter(function() {
            if ($(this).attr("name") === chosen_parent) {
                $(this).next('ul').append(temp_checkbox);
            }
        });

    });
})

$(':checkbox.parent').filter(function() {
    // create an object of 'this', as we are going to use it a couple of times.
    var $this = $(this);


    $this.on('click', function() {

        // check if the parent checkbox is checked
        if($this.is(':checked') == true) {

            // checking all the child checkboxes
            $this.next('ul').find('input:checkbox').prop('checked', true);

        } else {

            // unchecking all the child checkboxes
            $this.next('ul').find('input:checkbox').prop('checked', false);
        }
    });
})

// parent checked when all children are checked else unchecked
$(':checkbox.child').on('click', function() {

    var $this = $(this);

    // parent checkbox
    var $par_chekbx = $this.closest('ul').prev();


    if ($this.not(':checked') && $par_chekbx.is(':checked')) {
        $par_chekbx.prop('checked', false);
    }

    // checking if all children checkboxes are checked
    if ($this.closest('ul').find('input:checkbox:not(:checked)').length == 0) {
        $par_chekbx.prop('checked', true);
    }
    else {
        $par_chekbx.prop('checked', false);
    }

})

希望它有所帮助。

相关问题
最新问题