单选,复选,下拉列表的全选选中问题
基本思路就是找到元素,操作元素,关于怎么找看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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

JQUERY选中问题的更多相关文章

  1. jquery选中radio或checkbox的正确姿势

    jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题,没有任何征兆的..,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料, ...

  2. jquery选中checkbox

    jquery选中checkbox: $(function(){ $("[value = bb]:checkbox").attr("checked", true) ...

  3. jquery选中checkbox多选项并添加到文本框中

    <script> function check(){ var dd = ""; if($("input[type='checkbox'][name='moke ...

  4. Jquery选中行实现行中的Checkbox的选中与取消选中

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  5. uniform 中checkbox通过jquery 选中

    你是否曾经为不能修改多选框.单选框.文件选择框的样式而郁闷呢,是否想过控制它们的样式且兼容所有浏览器呢?我现在给你推荐的这个jQuery表单美化插件Uniform就可以解决这些问题. Uniform可 ...

  6. jQuery选中下拉列表,输出值

    jQuery部分: $("#form1 select").change(function () { var s=[]; $("#form1 select :selecte ...

  7. jquery 选中 未选的几种方法

    ---恢复内容开始--- jquery判断checked的三种方法:.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或 ...

  8. jQuery 选中tr下面的第某个td

    1.问题描述 点击 table 中的某行 tr,获取该 tr 下的第一个 td 标签下的< input type="hidden" value="92"/ ...

  9. jquery 选中设置的值

    select设置值为xxx选中:如下所示 $("#questionClass").val("xxx");

随机推荐

  1. Ajax 学习笔记

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  2. EntityFunctions

    提供在 LINQ to Entities 查询中的一些static方法 例如: EntityFunctions.CreateDateTime , , ) == created);

  3. 8种Java排序算法整理

    package org.hbz.test; import java.util.ArrayList; import java.util.Arrays; import java.util.List; im ...

  4. javaweb中重定向和请求转发(response.sendRedirect()和request.getRequestDispatcher(rul).forward(request,response)))的区别

    先来两张图,方便理解: 可以看出,重定向时,是服务器向游览器重新发送了一个response命令,让游览器再次向url2发送请求,以获取url2的资源 而请求转发时,类似于是服务器自己向自己发了一个跳转 ...

  5. 使用canvas进行图像编辑

    前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大 ...

  6. Django连接mysql数据库

    1.app中对应的models.py配置相关表结构信息 from django.db import models class Question(models.Model): question_text ...

  7. IDEA集成SSH Session

    1,在菜单栏选择Tools -> Start SSH Session 2,在SSH Session表单中输入: 3,在IDEA下方会弹出Terminal控制台,直接敲命令即可.  ------- ...

  8. css控制竖直文字显示

    假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...

  9. 【完整资料】TC358779XBG:HDMI转MIPI DSI芯片方案

    TC358779XBG是一颗HDMI1.4转MIPI  DSI带缩放功能的芯片,分辨率1920*1080,封装BGA80.通信方式:IIC,电源3.3/1.8/2.2,应用领域:平板,广告机,VR,显 ...

  10. 针对通达OA20170729集团版设计门户管理解决方案的具体实例

    随着企业信息化建设的深入,应用系统数量不断增加,应用功能不断丰富,数据信息也在呈几何级数增长,在支撑企业正常工作运转的同时,也衍生出许多新的问题: 通达信科根据自身从业多年的行业实践经验,勇于打破传统 ...