87,990
社区成员
发帖
与我相关
我的任务
分享[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>
...全文
请发表友善的回复…
发表回复
猿敲月下码 2011-05-16
- 打赏
- 举报
参考下把 :)
<!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>
caicoko 2011-05-16
- 打赏
- 举报
下面是全部代码
<!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>
猿敲月下码 2011-05-16
- 打赏
- 举报
LZ想法是好的 但是光看代码没效果 也不好做 最好连html一起发过来 看下效果
