Для отображения флажка динамически

Ниже приведен мой 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;}

Приведенный ниже результат, а когда пользователь добавляет новый флажок, флажок должен отображаться ниже соответствующего родителя.

источник

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

Для отображения флажка динамически

ответ

Смежные вопросы