动态选择动态复选框和实现

时间：2017-01-07 11:07:48

标签： jquery ajax

下面给出的是我的代码。我希望它以这样的方式运行：如果我选择编辑属性＆＃39;作为父母并添加＆＃39; abc＆＃39;作为新复选框，它会被添加为编辑属性的子项，如果我选择＆＃39; abc＆＃39;作为父级并添加新复选框＆＃39; xyz＆＃39;，必须在abc下面添加abc。 Simillarly它必须工作，如果我采取＆＃39; xyz＆＃39;父母和新的孩子。下面给出的是我的代码：

＆＃13;
＆＃13; 
 $('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" class="child2" id=id_' + child_name + ' 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);
       $('#select_parent').append('<option>' + child_name + '</option>');
       //alert(chosen_parent);
     }
   });
   $(':checkbox.child').filter(function() {
     if ($(this).attr("name") === chosen_parent) {
       $('#' + chosen_parent).append('<ul>' + temp_checkbox + '</ul>');
       $('#select_parent').append('<option>' + child_name + '</option>');

     }
   });
 });
 $('#add_button').attr('disabled', true);
 $('#inputcheckbox').keyup(function() {
   if ($(this).val().length != 0) {
     $('#add_button').attr('disabled', false);
   } else {
     $('#add_button').attr('disabled', true);
   }
 });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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 id='#treeList'>
            <li>
              <!--list of Property checkbox-->
              <input type="checkbox" class="parent" name="Property" />Property
              <ul id="sub">
                <li id="Edit_Property">
                  <input type="checkbox" class="child" name="Edit_Property" />Edit_Property
                </li>
                <li id="Remove_Property">
                  <input type="checkbox" class="child" name="Remove_Property" />Remove_Property
                </li>
                <li id="Add_Property">
                  <input type="checkbox" class="child" name="Add_Property" />Add_Property
                </li>
              </ul>
            </li>
            <!--end of Property checkbox-->
            <li>
              <!--list of Testimonial checkbox-->
              <input type="checkbox" class="parent" name='Testimonial' />Testimonial
              <ul>
                <li id="Add">
                  <input type="checkbox" class="child" name="Add" />Add
                </li>
                <li id="Remove">
                  <input type="checkbox" class="child" name="Remove" />Remove
                </li>
                <li id="View">
                  <input type="checkbox" class="child" name="View" />View
                </li>
                <li id="Edit">
                  <input type="checkbox" class="child" name="Edit" />Edit
                </li>
              </ul>
            </li>
            <!--end of testimonial checkbox-->
          </ul>
        </form>
      </div>
    </div>
    <div id="form_div">
      <br />
      <br />
      <div id="form_sub_div1">
        <br />
        <br />
        <form action="test4.php" method="POST">
          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 id="p">Property</option>
            <option>
              <p>Edit_Property</p>
            </option>
            <option>
              <p>Remove_Property</p>
            </option>
            <option>
              <p>Add_Property</p>
            </option>
            <option>Testimonial</option>
            <option>
              <p>Add</p>
            </option>
            <option>
              <p>Remove</p>
            </option>
            <option>
              <p>View</p>
            </option>
            <option>
              <p>Edit</p>
            </option>
          </select>
          <br />
          <br />Add New Checkbox:
          <input type="text" name="input_checkbox" id="inputcheckbox" />
          <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" />
          <span id="demo"></span>
        </form>
      </div>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我已将您的代码更改为：

 $('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" class="child2" id=id_' + child_name + ' name=' + child_name + '>' + child_name + '</li>';
   
   // appending the checkbox under the selected parent
   $(':checkbox').filter(function() {
     if ($(this).attr("name") === chosen_parent) {
     	// First check, are there any ul elements
      var ul = $(this).siblings('ul');
     
      if(ul.length == 0)
      {
      	$(this).parent().append('<ul>' + temp_checkbox + '</ul>');
      }else
      {
      	ul.append(temp_checkbox);
      }
     //  $(this).next('ul').append(temp_checkbox);
       $('#select_parent').append('<option>' + child_name + '</option>');
       //alert(chosen_parent);
     }
   });
   /*
   $(':checkbox.child').filter(function() {
     if ($(this).attr("name") === chosen_parent) {
       $('#' + chosen_parent).append('<ul>' + temp_checkbox + '</ul>');
       $('#select_parent').append('<option>' + child_name + '</option>');

     }
   });*/
 });
 $('#add_button').attr('disabled', true);
 $('#inputcheckbox').keyup(function() {
   if ($(this).val().length != 0) {
     $('#add_button').attr('disabled', false);
   } else {
     $('#add_button').attr('disabled', true);
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id='#treeList'>
          <li>
            <!--list of Property checkbox-->
            <input type="checkbox" class="parent" name="Property" />Property
            <ul id="sub">
              <li id="Edit_Property">
                <input type="checkbox" class="child" name="Edit_Property" />Edit_Property
              </li>
              <li id="Remove_Property">
                <input type="checkbox" class="child" name="Remove_Property" />Remove_Property
              </li>
              <li id="Add_Property">
                <input type="checkbox" class="child" name="Add_Property" />Add_Property
              </li>
            </ul>
          </li>
          <!--end of Property checkbox-->
          <li>
            <!--list of Testimonial checkbox-->
            <input type="checkbox" class="parent" name='Testimonial' />Testimonial
            <ul>
              <li id="Add">
                <input type="checkbox" class="child" name="Add" />Add
              </li>
              <li id="Remove">
                <input type="checkbox" class="child" name="Remove" />Remove
              </li>
              <li id="View">
                <input type="checkbox" class="child" name="View" />View
              </li>
              <li id="Edit">
                <input type="checkbox" class="child" name="Edit" />Edit
              </li>
            </ul>
          </li>
          <!--end of testimonial checkbox-->
        </ul>
      </form>
    </div>
  </div>
  <div id="form_div">
    <br />
    <br />
    <div id="form_sub_div1">
      <br />
      <br />
      <form action="test4.php" method="POST">
        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 id="p">Property</option>
          <option>
            <p>Edit_Property</p>
          </option>
          <option>
            <p>Remove_Property</p>
          </option>
          <option>
            <p>Add_Property</p>
          </option>
          <option>Testimonial</option>
          <option>
            <p>Add</p>
          </option>
          <option>
            <p>Remove</p>
          </option>
          <option>
            <p>View</p>
          </option>
          <option>
            <p>Edit</p>
          </option>
        </select>
        <br />
        <br />Add New Checkbox:
        <input type="text" name="input_checkbox" id="inputcheckbox" />
        <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" />
        <span id="demo"></span>
      </form>
    </div>
  </div>
</div>

它正在运行但我认为您需要更改HTML结构以使其更高效和准确。使用$（this）.attr（“name”）可能不是最佳解决方案，因为它也会尝试匹配空格。我认为使用data- * attr是一种更好的方法。

另外，尝试使用div或span包装li inner以便能够添加子ul。

相关问题
最新问题