Question

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

When i click on edit checkboxes appear but i want when i check any checkbox the input box appear and i can able to modify details.

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

please help me out how can i solve this problem.

thank you.

Answer 1

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

I closed out your checkbox input tags, wrapped the text beside them in a span.

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

Then added a click handler to the checkboxes.

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

It’s probably not the most elegant code, but it’ll work.