复选数据框

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

单选数据框

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

下拉数据条

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

JQ 全选设定与设置选中的更多相关文章

  1. JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jq 全选、反选、判断选中的条数

    1.全选或全不选.当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态. $("#all").click(fu ...

  3. jq 全选和反选以及判断那条被选中

    <body><div><input type="checkbox" id="a" />全选</div><d ...

  4. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  5. jQ全选效果

    <ul id="list"> <li><label><input type="checkbox" value=&quo ...

  6. ----Juquery复选框全选反选及获取选中值Value

    --获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...

  7. 点击checkbox全选，其它被选中，再点击取消

    <input type="checkbox" value="" id="checkall" name="" siz ...

  8. jq全选、全不选、反选、单删、批量删除

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. JQ 全选、全不选

    $(document).ready(function() { $("#isalldebt").click(function() { if ($(this).attr("c ...

随机推荐

  1. Android开发学习笔记--一个有界面A+B的计算器

    做了一个A+B的APP,虽然很简单,但是作为初学者还是弄了几个小时才弄好,什么东西都要看书或者百度,但最后成功了,还是很开心的,收货蛮大的.现在把过程写一下: 首先给出效果图: 一开始布局一直有问题, ...

  2. BZOJ2599——[IOI2011]Race

    0.题意:给一棵树,每条边有权.求一条路径,权值和等于K,且边的数量最小. 1.分析:水题一道,一波树分治就好 我们可以发现这个题的K是比较小的,才100w,那么我们可以树分治一下,在遍历每一棵子树的 ...

  3. 4.1---二叉树是否平衡（CC150）

    //也就是把高度在递归过程中给一并算了.public class Balance { public static boolean checkBalance(TreeNode root, int[] d ...

  4. 3.2---最小栈（CC150）

    //思路:入栈时不是最小值,永远都没机会成为最小值. import java.util.Stack; class MinStack { private Stack<Integer> sta ...

  5. python 随笔(property & __class__)

    1. 属性装饰器: property @property def errors(self): """ Returns a list of form.errors for ...

  6. VQuery高级特性

    VQuery高级特性 css方法 同时设置多个--for in 链式操作 链式操作 函数,链式操作 css 方法链式操作 json的使用 阻止冒泡,默认事件 VQuery插件 插件机制 可以扩展库的功 ...

  7. Objective C 快速入门学习四

    类 1.合成存取器方法 @property   成员变量 @synthesize 成员变量 可以让编译器自动合成 设置和获取函数的方法,不用手动生成set成员变量,Get成员变量 @interface ...

  8. MySQL查询交集

    MySQL表 CREATE TABLE `viewhistory` (   `viewid` int(11) NOT NULL AUTO_INCREMENT,   `uid` int(11) NOT ...

  9. 【Networking】gRPC golang 相关资料

    参考资料: Golang gRPC 示例:  http://www.cnblogs.com/YaoDD/p/5504881.html grpc golang学习心得(1)----安装与测试:   ht ...

  10. JQ添加标签

    <script type="text/javascript" src="http://files.cnblogs.com/914556495wxkj/jquery- ...