复选数据框

<!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. Sqli-LABS通关笔录-2

    在这个关卡学习到了 1.程序的错误不是学校收费乱来的,单引号的错误和减号的错误要明白 单引号报错. 用第一关的PAYLOAD尝试了下. 来看看源码: 那么我们构造的sql也就变成了 $sql=&quo ...

  2. Valgrind 3.11.0编译安装

    Valgrind 3.11.0编译安装 Valgrind是一款用于内存调试.内存泄漏检测以及性能分析的软件开发工具. Valgrind遵守GNU通用公共许可证条款,是一款自由软件. 到3.3.0版本为 ...

  3. ［转］ubuntu 14.04 如何开启和关闭触控板

    转自:http://lxn348567248.blog.163.com/blog/static/1201759252014649443513/ 禁用触摸板的命令:  sudo rmmod psmous ...

  4. 【转】【编码】ANSI,ASCII,Unicode,UTF8之一

          不同的国家和地区制定了不同的标准,由此产生了 GB2312.GBK.GB18030.Big5.Shift_JIS 等各自的编码标准.这些使用多个字节来代表一个字符的各种汉字延伸编码方式,称 ...

  5. 转：ASP.NET 使用Ajax

    之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的Sc ...

  6. vim常用命令（iOS）

    iOS下vim的使用: vim 的三种模式: .一般模式(默认) .插入模式(写文字) .命令行模式(保存) 各种模式的功能区分如下: .一般模式:控制屏幕光标的移动,字符和光标的删除,移动复制某区段 ...

  7. ubuntu14.04 server安装gnome-desktop

    You can install the default Ubuntu desktop by executing the following: sudo apt-get install ubuntu-d ...

  8. 【GoLang】GoLang 错误处理 -- 异常处理思路示例

    代码: package main import ( "fmt" // "testing" ) var Pkg = "packageName" ...

  9. 【云计算】qcow2虚拟磁盘映像转化为vmdk

    Software QEMU emulator version 1.7.0 Introduction Since we use VmWare in my company, I started to pl ...

  10. 【leetcode】Populating Next Right Pointers in Each Node II

    Populating Next Right Pointers in Each Node II Follow up for problem "Populating Next Right Poi ...