jquery查找checked属性的对象示例

发布时间:2020-07-11编辑:脚本学堂
本文介绍了jquery查找checked属性对象的方法,有需要的朋友参考下。

如何使用jquery查询radio和checkbox,select标签的对象,还有被选中的对象。

例子:
 

复制代码 代码示例:
<!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=gb2312" /> 
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script> 
<style type="text/css"> 
.option{ 
    width:200px; 

</style> 
<script type="text/javascript"> 
$(document).ready( 
    function(){ 
        $("#hobby_select_all").toggle(selectAll,unselectAll); 
    } 
); 
 
function testHobby(){ 
//选择被选中而且类型为checkbox的对象 
//$('input[@name=items][@checked]')好像查找不到对象 
    $("input:checked[type=checkbox]").each(function(i,obj){ 
        alert($(this).val()); 
    }); 
}  www.jb200.com
 
function selectAll(){ 
//设置字符串也可以,但是全部不选的时候好像功能不能实现 
    $("input[type=checkbox]").attr("checked",true); 

 
function unselectAll(){ 
//如果设置的值为字符串,页面的效果可能显示不出来 
    $("input[type=checkbox]").attr("checked",false); 

 
function testSex(){ 
    $("input[type=radio]").each(function(i,obj){ 
        alert($(this).val()); 
    }); 

 
function testCheckedSex(){ 
        alert($("input:checked[type=radio]").val()); 

 
function testSelect(){ 
    alert($("select").val()); 
    //下面这种方式好像查找不到对象 
    //alert($(".select").find('option:selected').html()); 

 
function resetValue(){ 
    $("select").val("2011"); 
    //$("select").val("2011");无效设置 

</script> 
<title>无标题文档</title> 
</head> 
<body> 
<fieldset> 
    <legend>爱好</legend> 
    <input type="checkbox" name="hobby" value="basketball" checked>篮球 
    <input type="checkbox" name="hobby" value="skiing">轮滑 
    <input type="checkbox" name="hobby" value="music">唱歌 
    <input type="checkbox" name="hobby" value="net_work">上网 
    <br> 
    <input type="button" value="遍历选中的" onclick="testHobby()"> 
    <input type="button" value="全选" onclick="selectAll()"> 
    <input type="button" value="全部不选" onclick="unselectAll()"> 
    <input type="checkbox" value="selectAll" id="hobby_select_all">全选 
</fieldset> 
 
<fieldset> 
    <legend>性别</legend> 
    <input type="radio" name="sex" value="boy">男 
    <input type="radio" name="sex" value="girl">女 
    <br> 
    <input type="button" value="测试" onclick="testSex()"><br> 
    <input type="button" value="测试已经选中的" onclick="testCheckedSex()"> 
</fieldset> 
 
<fieldset> 
    <legend>出生日期</legend> 
    <select class="option"> 
        <option value="2007">2007</option> 
        <option value="2008">2008</option> 
        <option value="2009">2009</option> 
        <option value="2010">2010</option> 
        <option value="2011">2011</option> 
    </select> 
    <br /> 
    <input type="button" value="测试已经选中的" onclick="testSelect()"> 
    <input type="button" value="重新设置" onclick="resetValue()"> 
</fieldset> 
</body> 
</html>