Question

当我点击编辑复选框时出现，但我想当我勾选任何复选框时，输入框出现，我可以修改细节。

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(){
        });
    });
});

请帮助我如何解决这个问题。

谢谢。

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();
        }
    });

它可能不是最优雅的代码，但它会起作用。

HTML复选框输入未显示

1 个答案: