[jquery]请问下面代码如何改成通用一点的或者写一个插件

下面主要有2个效果，基本上处理方法是一致的，大概意思点击check表单的时候隐藏部分html代码，如果改写使用更简单，更通用，更方便调用，或者是jquery插件的形式，求教了。<script type="text/javascript">
$(function()
{
$('#manage_Pic').hide();
$('#CB_IsPic').click(function()
{
var ispic = $(this).attr('checked');
if(ispic)
{
$('#manage_Pic').show();
}
else
{
$('#manage_Pic').hide();
}
}); if($('#CB_IsPic').attr('checked'))
{
$('#manage_Pic').show();
}
$('#manage_Url').hide();
$('#manage_Keywords').hide();
$('#manage_Description').hide();
$('#CB_IsSeo').click(function()
{
var isseo = $(this).attr('checked');
if(isseo)
{
$('#manage_Url').show();
$('#manage_Keywords').show();
$('#manage_Description').show();
}
else
{
$('#manage_Url').hide();
$('#manage_Keywords').hide();
$('#manage_Description').hide();
}
}); if($('#CB_IsSeo').attr('checked'))
{
$('#manage_Url').show();
$('#manage_Keywords').show();
$('#manage_Description').show();
}
})
</script>

解决方案 »

  1.   

    LZ想法是好的 但是光看代码没效果 也不好做 最好连html一起发过来 看下效果
      

  2.   

    下面是全部代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function()
    {
            $('#manage_Pic').hide();
            $('#CB_IsPic').click(function()
            {
                var ispic = $(this).attr('checked');
                if(ispic)
                {
                    $('#manage_Pic').show();
                }
                else
                {
                    $('#manage_Pic').hide();
                }
            });        if($('#CB_IsPic').attr('checked'))
            {
                $('#manage_Pic').show();
            }        
            $('#manage_Url').hide();
            $('#manage_Keywords').hide();
            $('#manage_Description').hide();
            $('#CB_IsSeo').click(function()
            {
                var isseo = $(this).attr('checked');
                if(isseo)
                {
                    $('#manage_Url').show();
                    $('#manage_Keywords').show();
                    $('#manage_Description').show();
                }
                else
                {
                    $('#manage_Url').hide();
                    $('#manage_Keywords').hide();
                    $('#manage_Description').hide();
                }
            });        if($('#CB_IsSeo').attr('checked'))
            {
                $('#manage_Url').show();
                $('#manage_Keywords').show();
                $('#manage_Description').show();
            }
    })
    </script></head><body>
    <table class="table" style="margin-top:8px;"><tr id="manage_IsPic">
    <th style="width:120px;">是否图片</th>
    <td><input id="CB_IsPic" type="checkbox" name="CB_IsPic" /></td>
    </tr><tr id="manage_Pic">
    <th style="width:120px;">图片地址<td>
    <td><input name="TB_Pic" type="text" id="TB_Pic" /></td>
    </tr><tr id="manage_IsSeo">
    <th style="width:120px;">设置SEO</th>
    <td><input id="CB_IsSeo" type="checkbox" name="CB_IsSeo" /></td>
    </tr><tr id="manage_Url">
    <th style="width:120px;">重写URL地址</th>
    <td><input name="TB_Url" type="text" id="TB_Url" /></td>
    </tr><tr id="manage_Keywords">
    <th style="width:120px;">关键词</th>
    <td><textarea name="TB_Keywords" rows="2" cols="20" id="TB_Keywords"></textarea></td>
    </tr><tr id="manage_Description">
    <th style="width:120px;">关键词</th>
    <td><textarea name="TB_Description" rows="2" cols="20" id="TB_Description"></textarea></td>
    </tr></table>
    </body>
    </html>
      

  3.   

    参考下把 :)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
    /////////////////////////////////////
    ;(function($){

    $.fn.myCheck = function(options){
    var defaults = {
    optDiv : "" // 存放需要操作的的div(未实现)
    ,optIds : [] // 存放需要操作的的id
    ,optName : "" // 存放需要操作的元素Name(未实现)
    }
    options = $.extend(true,defaults,options);

    var ids = options.optIds;
    for(var i in ids){ // 实现隐藏
    $("#"+ids[i]).hide();
    } this.click(function(){
    var ids = options.optIds;
    if($(this).is(":checked")){
    for(var i in ids){
    $("#"+ids[i]).show();
    }
    }else{
    for(var i in ids){
    $("#"+ids[i]).hide();
    }
    }
    })
    }

    })(jQuery);
    ////////////////////////////////////////
    $(function(){
    var ids = ["manage_Pic"]
        $("#CB_IsPic").myCheck({optIds:ids}) var ids2 = ["manage_Url","manage_Keywords","manage_Description"]
        $("#CB_IsSeo").myCheck({optIds:ids2})
    })
    </script></head><body>
    <table class="table" style="margin-top:8px;"><tr id="manage_IsPic">
        <th style="width:120px;">是否图片</th>
        <td><input id="CB_IsPic" type="checkbox" name="CB_IsPic" /></td>
    </tr><tr id="manage_Pic">
        <th style="width:120px;">图片地址<td>
        <td><input name="TB_Pic" type="text" id="TB_Pic" /></td>
    </tr><tr id="manage_IsSeo">
        <th style="width:120px;">设置SEO</th>
        <td><input id="CB_IsSeo" type="checkbox" name="CB_IsSeo" /></td>
    </tr><tr id="manage_Url">
        <th style="width:120px;">重写URL地址</th>
        <td><input name="TB_Url" type="text" id="TB_Url" /></td>
    </tr><tr id="manage_Keywords">
        <th style="width:120px;">关键词</th>
        <td><textarea name="TB_Keywords" rows="2" cols="20" id="TB_Keywords"></textarea></td>
    </tr><tr id="manage_Description">
        <th style="width:120px;">关键词</th>
        <td><textarea name="TB_Description" rows="2" cols="20" id="TB_Description"></textarea></td>
    </tr></table>
    </body>
    </html>