订阅本栏目 RSS您所在的位置: 深山工作室 > HTML > 正文

jquery实现单选按钮radio选中和取消 使用prop()代替attr()

网络 2019/12/20 20:36:22 字体:大 中 小 浏览 4288
<!DOCTYPE html>
<html lang="en">
<head><title>jquery实现单选按钮radio选中和取消 使用prop()代替attr()</title></head>
<body>

JQuery获取选中的radio<br>
$('input:radio[name="sex"]:checked')<br><br>

Jquery选中或取消radio<br>
$("#qwbmdanxuan1").attr("checked","checked");<br>
$("#qwbmdanxuan2").attr("checked",false);<br><br>



<input type="radio" name="aaa" value="第 1 个">
第 1 个<br>
<input type="radio" name="aaa" value="第 2 个">第 2 个<br>
<input type="radio" name="aaa" value="第 3 个">第 3 个<br>
<input type="radio" name="aaa" value="第 4 个">第 4 个<br>
<input type="radio" name="aaa" value="第 5 个">第 5 个<br><br>

<button class="btn1">点我除去选中项</button>
<button class="btn2">点我选中第二个</button>
<button class="btn3">点我选中第三个</button>
<button class="btn4">点我选中第四个</button>
<button class="btn5">点我选中第五个</button>
<script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    /*//解决选中的单选框无法取消问题
    $(":radio").click(
        function(){
            var nm=$(this).attr("name");
            $(":radio[name="+nm+"]:not(:checked)").attr("tag",0);
            if($(this).attr("tag")==1){
                $(this).attr("checked",false);
                $(this).attr("tag",0);
            } else{
                $(this).attr("tag",1);
            }
        }
    );*/

    function de() {
        //错误示范,均会出现什么各种问题
        /*$.each($('input:radio'),function(i,v){
            $(v).attr('checked', false);
            $(v).removeAttr('checked');
            //v.checked = false;
            //v.removeAttribute("checked");
        })*/

        //$("input[name=aaa]").prop("checked",false);
        $('input:checked').prop('checked', false);
        //$("input[name=aaa]").removeAttr("checked")
    }

    $('.btn1').click(function () {
       de()
    })

    $('.btn2').click(function () {
        //de();
        $('input:radio').eq(1).prop('checked', true);

    })

    $('.btn3').click(function () {
        //de();
        $('input:radio').eq(2).prop('checked', true);

    })
    $('.btn4').click(function () {
        //de();
        $('input:radio').eq(3).prop('checked', true);

    })
    $('.btn5').click(function () {
        //de();
        $('input:radio').eq(4).prop('checked', true);

    })
   
</script>

</body>
</html>
相关阅读
利用javascript来静态添加表格行
深山旅行社网站管理系统 v1.3发布
网上页面java图片循环滚动特效
深山行者个人网站程序V0.2 效果图
window7简称win7下可以运行ASP文件,但是不能访问access数据库的解决办法
刘浏家俱
divcss范例下载
用javascript美化Select,并获取相应的值
更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>同类信息
2026 aliyun阿里域名云注册续费优惠口令
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
js指定日期加n天加n月加n年
更多>>最新添加文章
2026 aliyun阿里域名云注册续费优惠口令
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
更多>>随机抽取信息
理解css里的!important是什么意思?
超级实用且不花哨的js代码大全( 1 )
uni-app自定义组件调用
购买系统多久可以安装?
了解html基础知识之html标签集合
js中innerHTML,innerText,outerHTML的用法与区别