HTML複選框，輸入沒有出現

Question

http://jsfiddle.net/smhz/vFSV2/2/

當我在編輯複選框，單擊出現，但我希望當我檢查輸入框中出現的任何複選框，我可以能夠修改細節。

HTML

<table border="0"> 
    <tr> 
     <td class="fl underline" style="margin-bottom:15px;" colspan="3">User Profile 
      <span style="float:right;font-size:12px;margin-top:3px;word-spacing:6px;"> 
      <span id="edit_profile">Edit</span> | 
      <span id="del_profile">Delete</span> 
     </td> 
    </tr> 
    <tr> 
     <td class="hl">Complete Name</td> 
     <td class="hr"><input class="edit_info" type="checkbox" value="" style="display:none;"> Alex One </td>    
    </tr> 
    <tr> 
     <td class="hl">Address</td> 
     <td class="hr"><input class="edit_info" type="checkbox" value="" style="display:none;"> Street Address here </td> 
     </tr> 
    <tr> 
     <td class="hl">&nbsp;</td> 
     <td class="hr"><input class="edit_info" type="checkbox" value="" style="display:none;"> City here </td>    
    </tr> 
</table> 

CSS

body, h1, h2, h3, h4, h5, h6, a, p { 
    margin:10px; 
    padding:0px; 
    font-family:"Myriad Pro"; 
    font-size:100%; 
    color:#000; 
} 

table { width:100%; } 
.hr { width:59%; float:right } 
.hl { width:40%; float:left } 
.underline { border-bottom:2px solid #999; } 
.fr { width:19.9%; float:right } 
.fc {width:20%;float:left} 
.fl { width:60%; float:left } 

jQuery的

$('document').ready(function(){ 
    $('#edit_profile').click(function() { 
     $('.edit_info').toggle(function(){ 
     }); 
    }); 
}); 

請幫我我怎樣才能解決這名P roblem。

謝謝。

Answer 1

http://jsfiddle.net/vFSV2/11/

我收了你的複選框輸入標籤，包裹在一個跨度旁邊的文本。

<td class="hr"><input class="edit_info" type="checkbox" value="" style="display:none;"/> <span> Alex One </span></td>

然後添加一個單擊處理程序的複選框。

$('.edit_info').click(function(){ 
     if($(this).is(':checked')){ 
      $('<input>', { 'id':'editBox', 'type': 'texbox', 'val': $(this).siblings('span').text()}).insertAfter($(this)); 
       $(this).siblings('span').hide(); 
     }else{ 
      $(this).siblings('#editBox').remove(); 
      $(this).siblings('span').show(); 
     } 
    }); 

這可能不是最優雅的代碼，但它會工作。