2010-03-30
最近,把项目整理了一下. 把以前用的一些 javascript 脚本整理下, 特针对 JQuery 给出一系列的封装脚本.
-------------------------
我测试用的JQuery版本是 jquery1.3.2, 在 ie7,ie8,firefox 下测试通过.
$("input[type=checkbox][@name="+chkName+"]").each(function(){this.checked=true;});
//$("input[name='chkCity']").each(function(){this.checked=true;});
}
/**
* function:全部取消选中
* @para chkName Checkbox名称
*/
function Wellhope_CancelSelectAll(chkName)
{
//$("input[name='chkCity']").attr("checked","false"); //这个有问题,不能实现全部取消的效果
$("input[type=checkbox][@name="+chkName+"]").each(function(){this.checked=false;});
}
/**
* function:反向选中
* @para chkName Checkbox名称
*/
function Wellhope_DeSelectAll(chkName)
{
$("input[type=checkbox][@name="+chkName+"]").each(function(){
if(this.checked)
this.checked = false;
else
this.checked = true;
});
}
/**
* function:查看选中的值
* @para chkName Checkbox名称
* @return 选中的值, 如果有多个,使用逗号隔开
*/
function Wellhope_GetSelectedValue(chkName)
{
var sltvalue = "";
var isHave = false;
//alert($("intput[name=chkCity][checked]").val());
$("input[type=checkbox][@name="+chkName+"][@checked]").each(function(){
if(this.checked){
sltvalue += this.value;
sltvalue+=",";
}
});
if(""!=sltvalue)
{
var length = sltvalue.length;
sltvalue = sltvalue.substring(0,length-1);
}
return sltvalue;
}
//----------------------------
上面的脚本拷贝到一个单独的javascript文件,然后在项目中应用即可. 如我的工程是
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript" src="jquery-wellhope-checkbox.js"></script>
下面给出完整的一个测试脚本的页面, 如果看客感兴趣, 可以拷贝出来运行即可
// --></mce:script>
<h2>演示使用JQuery操作复选框CheckBox</h2>
</p>
<hr />
<div id="divButtons" style=" border-width: thin; border-color:#009; border-style:solid;" mce_style=" border-width: thin; border-color:#009; border-style:solid;">
<input type="submit" name="btn1" id="btn1" value="全部选中" onclick="Wellhope_SelectAll('chkCity')"/>
<input type="submit" name="btn2" id="btn2" value="取消所有选中" onclick="Wellhope_CancelSelectAll('chkCity')"/>
<input type="submit" name="btn2" id="btn3" value="反向选中" onclick="Wellhope_DeSelectAll('chkCity')"/>
<input type="submit" name="btn3" id="btn4" value="查看选中的值" onclick="alert(Wellhope_GetSelectedValue('chkCity'))" />
</div>
<p> </p>
<div id="divContent" style=" border-width: thin; border-color:#009; border-style:dashed;" mce_style=" border-width: thin; border-color:#009; border-style:dashed;">
<p>
<label>
<input type="checkbox" name="chkCity" value="北京市" id="chkCity_0" />
北京市</label>
<br />
<label>
<input type="checkbox" name="chkCity" value="上海市" id="chkCity_1" />
上海市</label>
<br />
<label>
<input type="checkbox" name="chkCity" value="徐州市" id="chkCity_2" />
徐州市</label>
<br />
<label>
<input type="checkbox" name="chkCity" value="官山镇" id="chkCity_3" />
官山镇</label>
<br />
</p>
</div>
<p> </p>
<br /><br /><br /><br />
<h2>POWER BY WELLHOPE 2009</h2>
</body>
</html>