JQ 全选设定与设置选中

复选数据框

<!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 src="jquery-1.11.2.min.js"></script>
</head>

<body>
<div>全选<input type="checkbox" id="qx" /></div>
<div>
植物园<input type="checkbox" class="ck" value="植物园" />
公园<input type="checkbox" class="ck" value="公园" />
医院<input type="checkbox" class="ck" value="医院" />
餐厅<input type="checkbox" class="ck" value="餐厅" />
</div><br />
<div><input type="button" value="取值" id="btn" /></div><br />
<div>
请输入区域:<input type="text" id="qy" />
<input type="button" value="设置选中" id="szxz" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#qx").click(function(){
        //找到全选按钮的选中状态
        var xz=$(this).prop("checked");
        //将复选框列表里面所有的复选框的选中状态变为全选的选择状态
        $(".ck").prop("checked",xz);
        })
        $("#btn").click(function(){
            
            var ck=$(".ck");
            
            for(var i=0;i<ck.length;i++)
            {
                //取JQUERY对象
                //ck.eq(i).prop("checked");
                //取DOM对象    
                //ck[i].checked
                
                if(ck.eq(i).prop("checked"))
                {
                    alert(ck.eq(i).val());    
                }
            }
            })
            
    $("#szxz").click(function(){
        
        //获取用户输入的值
        var qy=$("#qy").val();
        //设置选中
        var ck=$(".ck");
        
        ck.prop("checked",false);
        
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).val()==qy)
            {
                ck.eq(i).prop("checked",true);    
            }    
        }
        
        })        
            
            
});


</script>
</html>

View Code

单选数据框

<!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 src="jquery-1.11.2.min.js"></script>
</head>

<body>
<div>
植物园<input type="radio" name="qy" class="ck" value="植物园" />
公园<input type="radio" name="qy" class="ck" value="公园" />
医院<input type="radio" name="qy" class="ck" value="医院" />
餐厅<input type="radio" name="qy" class="ck" value="餐厅" />
</div><br />
<div><input type="button" value="取选中值" id="btn" /></div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#btn").click(function(){
        
        var ck=$(".ck");
        //利用for循环输出
        for(var i=0;i<ck.length;i++)
        {
                if(ck.eq(i).prop("checked"))
                {
                    alert(ck.eq(i).val());    
                }
        }
        
        })
});


</script>
</html>

View Code

下拉数据条

<!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 src="jquery-1.11.2.min.js"></script>
</head>

<body>
<select id="qy">
<option value="1">所有</option>
<option value="植物园">植物园</option>
<option value="公园">公园</option>
<option value="医院">医院</option>
<option value="餐厅">餐厅</option>
</select>
<input type="button" value="取选中值" id="btn" /><br />
<div>请输入：
<input type="text" id="zhi" />
<input type="button" value="设置选中" id="szxz" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#btn").click(function(){
        
        alert($("#qy").val());
        
        })
        
    $("#szxz").click(function(){
        
        var zhi=$("#zhi").val();
        
        var op=$("option");
        
        /*for(var i=0;i<op.length;i++)
        {
            //op.eq(i).prop("selected");    
            if(op.eq(i).val()==zhi)
            {
                op.eq(i).prop("selected",true);    
            }
        }*/
        
        $("#qy").val(zhi);
        
        })
});
</script>
</html>

View Code