動態顯示覆選框

下面給出的是我的php代碼，它由複選框和窗體組成，無論用戶選擇父窗體並在文本框中寫入，文本框中的寫入值必須顯示爲複選框，並且應顯示在父母複選框。這應該不會影響代碼，當選擇父代複選框時，必須選中所有子代複選框，當選擇單個子代框時，必須選擇父代複選框，並且當沒有選擇子代時，也不能選擇父代：動態顯示覆選框

This是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;}

下面給出的是輸出結果，當用戶添加新的複選框時，複選框必須顯示在相應的父代下面

來源

2017-01-04 Birju

' '真的嗎？ –

向我們展示您需要的[mcve]。 –

我在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); 
    } 

})

希望它能幫助。

來源

2017-01-05 06:29:26 Ejaz

非常感謝。它工作但不完全，它不適用於子複選框。例如。如果我在下拉菜單中選擇編輯屬性並嘗試添加新的複選框。它不起作用 – Birju

@Birju：是的，您可以爲其他功能添加類似的代碼。 – Ejaz

動態顯示覆選框

回答

相關問題