文档章节

Jquery操作单选框选中状态

leeyi
 leeyi
发布于 2017/06/29 10:18
字数 847
阅读 49
收藏 0

我的代码:

                    <div class="row">
                        <div class="col-10">&nbsp;</div>
                        <div class="col-40 ">
                            <label class="button button-big label-checkbox" style="line-height: 1.6rem;">
                                <?php if($card_org=='中石油') { ?>
                                <input type="radio" name="card_org" value="中石油" checked="true" />
                                <?php } else { ?>
                                <input type="radio" name="card_org" value="中石油" />
                                <?php } ?>
                                <div class="item-media">
                                    <i class="icon icon-form-checkbox"></i>
                                    &nbsp;中石油
                                </div>
                            </label>
                        </div>
                        <div class="col-40 ">
                            <label class="button button-big label-checkbox" style="line-height: 1.6rem;">
                                <?php if($card_org=='中石化') { ?>
                                <input type="radio" name="card_org" value="中石化" checked="true" />
                                <?php } else { ?>
                                <input type="radio" name="card_org" value="中石化" />
                                <?php } ?>
                                <div class="item-media">
                                    <i class="icon icon-form-checkbox"></i>
                                    &nbsp;中石化
                                </div>
                            </label>
                        </div>
                        <div class="col-10">&nbsp;</div>
                    </div>
<script type="text/javascript">
       var card_org = $('input:radio[name="card_org"]:checked').val();
      // $("input:radio").attr("checked",false);
      // $("input:radio[name='card_org']").eq(0).prop("checked",true); $('input:radio[name="card_org"]:checked').val();
      // $("input:radio[name='card_org']").eq(1).prop("checked",true); $('input:radio[name="card_org"]:checked').val();
</script>

前端开发中经常使用到单选框(radio)与多选框(checkbox)组件,需要对组件的状态进行设置和读取,下面看一段网上流行的操作代码:

<div class="cb-container">
<input type="radio" class="cb-radio" id="r1" name="rd" value="left"/>
<input type="radio" class="cb-radio cb-gap2" id="r2" name="rd" value="right"/>
<button id="btn" type="button" class="btn btn-primary cb-gap">left</button>
<button id="btn2" type="button" class="btn btn-primary cb-gap">right</button>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var radios = $(".cb-radio");
        $("#btn").click(function () {
            radios.eq(0).attr("checked", true);
            radios.eq(1).attr("checked", false);
        });
        $("#btn2").click(function () {
            radios.eq(0).attr("checked", false);
            radios.eq(1).attr("checked", true);
        });
    });
</script>

可以点击下面的单选框查看效果,整体代码可以在 https://example.codeboy.me/jquery/radio_operate_0.html 查看。

测试后发现 left 与 right 按钮只有第一次点击后才能选择,之后点击后单选框的选中状态将一直处于未选中状态。

为什么为出现这种现象呢?

jQuery中同时提供了attr()与prop()方法对属性进行获取,但是还是有一定的区别,看一下 官网 的解释:


The difference between attributes and properties can be important in specific situations. Before jquery 1.6 , the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6 , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6 , these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.


可以看出,官网给出了明确的解释,在jquery1.6之后,对于checked,selected等进行状态改变时,需要使用的是prop()而不是attr(),于是我们我们将之前代码中的attr改变为prop后,可以看到运行效果如下,代码可以在 https://example.codeboy.me/jquery/radio_operate_1.html 查看。

点击测试后,看到可以看到选择了。

获取选中状态

已经成功的可以设置单选框的状态了,下面就是判断到底单选框是否选中了,这个也同样是使用prop().

$("#r1").prop();

上面代码将会返回 true 或 false , 进而判断是哪个单选框被选中的。

如果只是需要获取单选框选中元素的value值,即上面代码中的left与right属性,那边执行使用下面代码即可:

$(".cb-radio:checked").val();

上面代码将返回 left 或 right 或 undefined ,也即选中元素的值,如果都没选中的话返回undefined。例子见下,代码可以在 https://example.codeboy.me/jquery/radio_operate_2.html 查看。

本文转载自:http://blog.csdn.net/jiegeng2233/article/details/53083545

leeyi

leeyi

粉丝 6
博文 46
码字总数 52736
作品 0
深圳
架构师
私信 提问
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
96
0
jquery 学习

1.常见的jquery 对象操作 jquery取radio单选按钮的值 $("input[name='items']:checked").val(); jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相......

晨曦之光
2012/03/09
78
0
jQuery操作form input、select、checkbox、radio常用方法

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#selectid").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#selectid").find("op......

youxizhe
2014/11/13
3.7K
0
jquery radio取值,checkbox取值,select取值,radio选中,checkbo

一、jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var l......

乐派电影
2014/03/31
226
0
jQuery select操作控制方法小结

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#selectid").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#selectid").find("op......

JK_OPERA
2015/07/10
133
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部