JQUERY选中问题
2024-08-24 11:27:10
单选，复选，下拉列表的全选选中问题
基本思路就是找到元素，操作元素，关于怎么找看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>
最新文章
- hashMap的get()方法，错用并发造成cpu和负载高
- JVM内存分析工具MAT使用
- System.IO.File.Create 不会自动释放，一定要Dispose
- js用8421码实现10进制转2进制
- java小程序 质数
- Fast Intro To Java Programming (2)
- Linux批量替换文件内容
- CentOS squid代理内网主机上网 openVpn配置
- jQuery框架Ajax常用选项
- Python 第三方库 cp27、cp35 等文件名的含义(转)
- Codeforces 985 F - Isomorphic Strings
- iOS开发--UIButton 设置圆角 边框颜色 点击回调方法
- json数据爬虫。requests实现
- 在windows 2008 R2中SQl Server 2008中代理启动失败的一个原因总结
- Linux xargs命令详解
- 操作数据----DML语句
- apk反编译——基础是内功，得牢，飞跃还得多看源码，不同思想的碰撞才能产生火花，加油！！！！！！！！
- hive表信息查询：查看表结构、表操作等--转
- 从头认识多线程-1.9 迫使线程停止的方法-return法
- FastAdmin 线上部署流程 （2018-05-03 更新）