PHP Jquery2

radio.php

<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<div>
    张店<input type="radio" name="zb" class="zb" value="zd" />
    博山<input type="radio" name="zb" class="zb" value="bs" />
    淄川<input type="radio" name="zb" class="zb" value="zc" />
    周村<input type="radio" name="zb" class="zb" value="zcs" />
    临淄<input type="radio" name="zb" class="zb" value="lz" />
    桓台<input type="radio" name="zb" class="zb" value="ht" />
    高青<input type="radio" name="zb" class="zb" value="gq" />
    沂源<input type="radio" name="zb" class="zb" value="yy" />
</div><br />
<div><input type="button" value="取选中值" id="btn" /></div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    
    $("#btn").click(function(){
        
        var zb=$(".zb");
        for(var i=0;i<zb.length;i++)
        {
            if(zb.eq(i).prop("checked"))
            {
                alert(zb.eq(i).val());
            }
        }
        
        })
});

</script>

<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<div>全选：<input type="checkbox" id="qx" /></div><br />
<div>
    张店<input type="checkbox" class="zb" value="zd" />
    博山<input type="checkbox" class="zb" value="bs" />
    淄川<input type="checkbox" class="zb" value="zc" />
    周村<input type="checkbox" class="zb" value="zcs" />
    临淄<input type="checkbox" class="zb" value="lz" />
    桓台<input type="checkbox" class="zb" value="ht" />
    高青<input type="checkbox" class="zb" value="gq" />
    沂源<input type="checkbox" class="zb" value="yy" />
</div><br />
<div><input type="button" id="btn" value="取选中项的值" /></div><br />
<div>
    请输入区域：<input type="text" id="qy" />
    <input type="button" value="设置选中" id="sz" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#qx").click(function(){
        
        //prop可以取到选中状态
        //取到全选按钮的选中状态
        var xz=$(this).prop("checked");
        //将class为zb的复选框的选中状态变为全选按钮的选中状态
        $(".zb").prop("checked",xz);
        
    })
        
    $("#btn").click(function(){
        
        //取到所有class为zb的复选框
        var zb=$(".zb");
        
        //取出选中值
        for(var i=0;i<zb.length;i++)
        {
            if(zb.eq(i).prop("checked"))
            {
                alert(zb.eq(i).val());
            }
        }
    })
    $("#sz").click(function(){
        
        //获取用户输入的值
        var qy=$("#qy").val();
        //设置选中
        var zb=$(".zb");
        zb.prop("checked",false);
        for(var i=0;i<zb.length;i++)
        {
            if(zb.eq(i).val()==qy)
            {
                zb.eq(i).prop("checked",true);
            }
        }
    })    
    
});

</script>

<script src="../jquery-1.11.2.min.js"></script>
</head>
<div>
<select id="zb">
    <option value="all">所有</option>
    <option value="zd">张店</option>
    <option value="bs">博山</option>
    <option value="zc">淄川</option>
    <option value="zcs">周村</option>
    <option value="lz">临淄</option>
    <option value="ht">桓台</option>
    <option value="gq">高青</option>
    <option value="yy">沂源</option>
</select>
<input type="button" value="取选中值" id="btn" />
</div><br />
<div>
    请输入要选中的值：
    <input type="text" id="zhi" />
    <input type="button" value="设置选中" id="sz" />
</div>
<body>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#btn").click(function(){
        
        //取选中值
        alert($("#zb").val());
        
        })
    $("#sz").click(function(){
        
        //取用户输入的值
        var zhi=$("#zhi").val();
        //取出所有的option
        var op=$("option");
        
        //设置选中值
        $("#zb").val(zhi);
        
        })
});

</script>

<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<div>请输入关键字<input type="text" id="key" /></div><br />
<div><input type="button" value="查询" id="btn" /></div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    
    //空格 ！= 空字符串 ！= NULL
    
    $("#btn").click(function(){
        
        var key=$("#key").val();
        
        //trim去空格
        if(key.trim()=="")
        {
            alert("查所有");
        }
        else
        {
            alert("根据条件查");    
        }
        })
});
</script>

<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
*
{
    margin:0px auto;
    padding:0px;}
#sel
{
    width:150px;
    height:30px;
    line-height:30px;
    vertical-align:middle;
    font-weight:bold;
    text-align:center;
    color:#006;
    border:1px solid #F6F;}
#sel:hover
{
    cursor:pointer;}
#list
{
    width:152px;
    display:none;}
.node
{
    width:152px;
    height:30px;
    line-height:30px;
    vertical-align:middle;
    font-weight:bold;
    text-align:center;
    color:#FFF;
    background-color:#F9F;}
.nodes
{
    width:152px;
    height:30px;
    line-height:30px;
    vertical-align:middle;
    font-weight:bold;
    text-align:center;
    color:#FFF;
    background-color:#FCF;}
.node:hover
{
    background-color:#F6C;
    cursor:pointer;}
.nodes:hover
{
    background-color:#F3F;
    cursor:pointer;}
</style>

</head>

<body>
<div id="sel">
</div>
<div id="list">
    <div class="nodes">张店</div>
    <div class="node">博山</div>
    <div class="nodes">淄川</div>
    <div class="node">周村</div>
    <div class="nodes">桓台</div>
    <div class="node">高青</div>
    <div class="nodes">临淄</div>
    <div class="node">沂源</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$("#sel").click(function(){
        
            if($("#list").css("display")=="none")
            {
                $("#list").css("display","block");
            }
            else
            {
                $("#list").css("display","none");
            }
        })
    $(".node").click(function(){
        
        var zhi=$(this).text();
        
        $("#sel").text(zhi);
        $("#list").css("display","none");
        })
    $(".nodes").click(function(){
        
        var zhi=$(this).text();
        
        $("#sel").text(zhi);
        $("#list").css("display","none");
        })
});
</script>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yy01/p/5736854.html