JQUERY选中问题

单选，复选，下拉列表的全选选中问题

基本思路就是找到元素，操作元素，关于怎么找看jquery简介，主要学习记住具体操作用到的方法

 

复选框的全选以及设置选中问题：

 

jquery中提供prop方法，判断是否选中，返货boolean类型

全选的思路就是找到元素，设置选中。

设置选中思路，判断输入值与元素中的值是否相等，相等设置选中。

例子：

<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="人民公园" />

王府井<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" />

 

<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++)        {

            //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>

 

单选的选中以及设置选中问题：

设置选中，先匹配输入，在设置选中，$(".a").eq(1).val)():通过eq 获取jquery对象，下标获取dom对象

例子：

<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="人民公园" />

王府井<input type="radio" name="qy" class="ck" value="王府井" />

</div>

<br />

<div><input type="button" value="取选中值" id="btn" /></div>

 

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

        var ck = $(".ck");

        for(var i=0; i<ck.length;i++)        {

            if(ck.eq(i).prop("checked"))            {

                alert(ck.eq(i).val());

            }

        }

        })

});

</script>

 

 

下拉列表的取值与设置选中：

 思路还是找到元素，获取值，匹配值。

注意：下拉列表除了选择器获取元素，也可以元素名取值

例子：

<select id="qy">

    <option value="1">所有</option>

    <option value="潘庄">潘庄</option>

    <option value="火炬公园">火炬公园</option>

    <option value="中关村">中关村</option>

    <option value="人民公园">人民公园</option>

    <option value="王府井">王府井</option>

</select>

<input type="button" value="取选中值" id="btn" />

<br />

<br />

<div>请输入值：

<input type="text" id="zhi" />

<input type="button" value="设置选中" id="szxz" />

</div>

 

<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>

 

查询的时候空字符串的问题，通过trim()方法去掉前后空格

例子：

<div>请输入关键字：<input type="text" id="key" /></div><br />

<input type="button" value="查询" id="btn" />

<script>

$(document).ready(function(e) {

 

    //空格 != 空字符串 != NULL

 

    $("#btn").click(function(){

 

        var zhi = $("#key").val();

 

        if(zhi.trim() == "")

        {

            alert("查所有");

        }

        else

        {

            alert("根据条件查");

        }

 

        })

</script>

 

自己写div实现下拉列表的隐藏，选中显式值：

思路;找到元素加单击事件，判断是否隐藏，设置隐藏属性

            获取选中元素的值(可以通过$(this)取当前元素的值)显示

例子：

<div id="xiala">

    <div id="sel">所有</div>

    <div id="list">

        <div class="node">所有</div>

        <div class="node">潘庄</div>

        <div class="node">中关村</div>

        <div class="node">火炬公园</div>

        <div class="node">人民公园</div>

    </div>

</div>

<script type="text/javascript">

    //下拉列表

    $("#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");

        })

});

</script>