2012-10-25 53 views
-2

我在我的html頁面中有一些CheckBox元素。我想要的是任何這些檢查,動態地添加一個input type='checkbox'到HTML頁面。如果未選中,則刪除添加的元素。沒有元素應該重複。如何使用javascript或jquery添加和刪除html元素?

<html><head> 
      <title>Welcome ! eDetailing :: Admin</title> 
      </head> 
     <body id="bdload"> 

    <form name="frm" method="post"> 
    <input type="hidden" name="deleteId" id="deleteId" value="3"> 
    <input type="hidden" name="nextId" id="nextId" value="1-0"> 
    <input type="hidden" name="prvId" id="prvId" value="4-0"> 

    <!----------------------------------------------media Information ------------------------------------------------------> 
     <div id="faqtable1" class="icongroup2"> 
      <div class="clBlock"> 
    <!--*****************************************************************************--> 
       <div class="clRow"> 
        <div class="clLeft"> 
         <span id="docFname" class="col1"> 
          <label class="clsvlabel" for="selMediaTitle">Media Title : </label> 
         </span> 
         <span class="col2 clWrite"> 
          <label class="labelshow" style="display: none; ">media 2</label> 
          <select name="selMediaTitlen" class="clsvtext clvselectempty" id="selMediaTitle" style="display: inline-block; "> 
           <option value="">Media Title</option> 
           <option value="42">Energy</option> 
            <option value="43" selected="selected">media 2</option> 
            <option value="44">media 3</option> 
            <option value="45">media 4</option> 
            <option value="46">mediapicture</option> 
            <option value="47">mediavid</option> 
            <option value="48">mediapdf</option> 
                  </select> 
         </span> 
        </div> 
       </div> 

      <div class="clRow"> 
         <div class="clRight1"> 
          <span id="docLname" class="col1"> 
           <label class="clsvlabel" for="txtmrname"></label> 
          </span> 
          <span class="col2 clWrite2"> 
           <div class="clcheckboxlist1"> 
            <div class="clckbxheader"> 
             <input type="checkbox" class="clckbxheadlist1 clsvtextempty" id="ckidh1" style=""> 
             <label for="ckidh1" id="chk1">Check All Doctor</label> 
             <label for="ckidh1" id="unchk1" style="display:none;">UnCheck All Doctors</label> 
            </div> 
            sdsd 
            <div class="clckbxbody1" id="cklist1"> 
            <span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" checked="checked" id="28" name="checkMr[]" value="28" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Zaheerdfsfghg Sdf</label> 
                   </span><div name="mydiv&gt;&lt;input type=" checkbox'class="txtshow clsvtextempty" id="28" value="28" class="checkmrdone"></div><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="6" name="checkMr[]" value="6" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Prizall Anuj Bagrecha</label> 
                   </span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="7" name="checkMr[]" value="7" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Javedq Rashid Ansari</label> 
                   </span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="2" name="checkMr[]" value="2" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Vijay Kumar Asthana</label> 
                   </span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="34" name="checkMr[]" value="34" style=""><label for="ckid1"><em style="background-color:#00FF7F;" class="emdoclist">Core Ai</em>Manish Malviya</label> 
                   </span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="1" name="checkMr[]" value="1" style=""><label for="ckid1"><em style="background-color:#9ACD32;" class="emdoclist">Core Bi</em>Sujoy Kumar Kale</label> 
                   </span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="4" name="checkMr[]" value="4" style=""><label for="ckid1"><em style="background-color:#9ACD32;" class="emdoclist">Core Bi</em>Avkaash K Tare</label> 
                   </span><span class="clckbxrow"> <input type="checkbox" class="txtshow clsvtextempty" id="5" name="checkMr[]" value="5" style=""><label for="ckid1"><em style="background-color:#800000;" class="emdoclist">Core Ci</em>Viabhav Shishir Parkhe</label> 
                   </span>        </div> 

            </div> 
          </span>    
         </div> 
        </div> 
    <!--*****************************************************************************--> 
        <div class="clRow"> 
         <div class="clLeft"> 
          <span id="docFname" class="col1"> 
           <label class="clsvlabel" for="chk_active">Active :</label> 
          </span> 
          <span class="col2 clWrite"> 
          <label class="labelshow" style="display: none; "> 
           YES 
          </label> 
          <input type="checkbox" name="chk_active" id="chk_active" value="0" style="width: auto; display: inline-block; " class="clsvtext clvselectempty clsvtextempty" checked="checked"> 
          </span> 
         </div> 
        </div> 
      </div> 
     </div> 

    </form> 
    </div> 
           </div> 
          </div> 
         </span> 
        </div> 
       </div> 
      </div> 

     <script type="text/javascript"> 
     $j("#btnadvsearch").bind("click", function() { 
        $j.ajax({ 
        type:"POST", 
        url:"advanceSearch.php", 
        data: { name : $j("#advMedia").val(),type : $j("#advType").val(),activ : $j("#selActive").val(),}, 
        success:function(response){ 
        $j("#showResult").html(response); 
        } 
       }); 
     }); 

     </script> 

    <div class="Zebra_DatePicker"><table class="dp_header"><tbody><tr><td class="dp_previous">«</td><td class="dp_caption">&nbsp;</td><td class="dp_next">»</td></tr></tbody></table><table class="dp_daypicker"></table><table class="dp_monthpicker"></table><table class="dp_yearpicker"></table></div><div class="Zebra_DatePicker"><table class="dp_header"><tbody><tr><td class="dp_previous">«</td><td class="dp_caption">&nbsp;</td><td class="dp_next">»</td></tr></tbody></table><table class="dp_daypicker"></table><table class="dp_monthpicker"></table><table class="dp_yearpicker"></table></div></body><span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span><object id="skype_plugin_object" location.href="http://localhost/konnect/mediaAssgin/" location.hostname="localhost" style="position: absolute; visibility: hidden; left: -100px; top: -100px; " width="0" height="0" type="application/x-vnd.skype.click2call.chrome.5.7.0"></object></html> 
+1

使用jQuery remove方法或本地removeChild –

回答

3

使用jQuery的.change()函數來確定何時複選框被改變。然後,分別使用.remove().append()函數刪除或添加元素。

如果您只想要隱藏一個元素(但實際上並未從DOM中刪除它),請使用.hide()。如果您希望使用自己的自定義類來隱藏元素,則還可以使用.attr()設置元素的類。

不要指望人們只爲你寫代碼。 jQuery的文檔非常好,應該足以幫助您開始。

相關問題