JQ-checkbox实现单选功能

JQ-checkbox实现单选功能<divstyle=”line-height:1.5em;padding:5px0;font-size:14px;”><ulclass=”mui-table-view”><liclass=”mui-input-row”><inputtype=”checkbox”name=”quesA”id=”quesA”value=”…

大家好,又见面了,我是你们的朋友全栈君。

<div style="line-height:1.5em;padding: 5px 0;font-size: 14px;">
  <ul class="mui-table-view">
    <li class="mui-input-row"><input type="checkbox" name="quesA" id="quesA" value=""/>A.我 
      比失恋还难受</li>
    <li class="mui-input-row"><input type="checkbox" name="quesB" id="quesB" value="" />B. 
      科比的退役是可惜,但是很快会有新人代替他</li>
    <li class="mui-input-row"><input type="checkbox" name="quesC" id="quesC" value="" />C. 
      科比就是矫情,退役还搞这么大的排场</li>
    <li class="mui-input-row"><input type="checkbox" name="quesD" id="quesD" value="" />D. 
      其他,_________________</li>
  </ul>
</div>

js实现单选功能,遍历每一个checkbox,如果有一个选中,其他的就默认未选中状态,从而实现checkbox单选功能,并且可以实现都不选中状态,比单选按钮要好一点

<script>
  $(function(){
        $(':checkbox[type="checkbox"]').each(function(){
            $(this).click(function(){
                if($(this).attr('checked')){
                    $(':checkbox[type="checkbox"]').removeAttr('checked');
                    $(this).attr('checked','checked');
                    alert(this.id);
                }
            });
        });
    });
</script>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/139311.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 指令的四个周期_cpu指令周期流程图

    指令的四个周期_cpu指令周期流程图指令流程图的概念菱形:译码,测试,表示判断,如零指令字是0或者1.与前面的CPU周期紧密相连,不单独占用CPU周期。每个方框箭头下面的是公共操作符符号,表示一条指令结束。mov指令将R1寄存器的数据存储到R2寄存器中,lad指令时间主存中的数据存储到寄存器中。sto是将R2中的数据根据R3中的主存地址存储到主存中。lad和sto是寄存器-主存指令需要三个CPU周期,其他都是寄存器-…

    2022年10月13日
    1
  • idea中创建一个web项目

    idea中创建一个web项目第一步:新建空的java项目在idea项目下,新建一个model,这个model就可以是一个java项目。然后会弹出一个框,选择新建java项目:点击【next】之后进入下一步,取model项目名称:写好名称和存放的路径之后,点击【finish】完成java的model项目创建:以上就是一个空的java项目的创建。第二步:在java项目的基础上创建web项目右击刚创建的java项目,添加web项目所需架构,如下图:点击【AddFrameworksSupport】之后,会弹出一个

    2022年8月29日
    0
  • case label does not reduce to_class not loaded

    case label does not reduce to_class not loadedClassCastException出现原因解决办法出现原因抛出以指示代码已尝试将对象强制转换为它不是实例的子类。例如,以下代码生成一个ClassCastException:对象x=新整数(0);System.out.println((String)x);解决办法这种异常我也不知道有什么能够完全解决的办法,但是可以同instanseof来避免例如:Pet宠物类   Dog狗狗类(继承Pet)  Penguin企鹅类(继承Pet)  Dogdog=(Dog)pet

    2022年9月8日
    0
  • 机器学习案例——鸢尾花数据集分析

    机器学习案例——鸢尾花数据集分析    前几天把python基础知识过了一遍,拿了这个小例子作为练手项目,这个案例也有师兄的帮助,记录完,发现代码贴的很多,文章有点长,为了节省篇幅,有一些说明就去掉了,毕竟鸢尾花数据集比较经典,网上能找到很多和我差不多的案例。还有就是发现一个新的markdown排版工具,今天想试试效果。数据来源    首先说一下,该数据集来源于网络。Iris也称鸢尾花卉数据集,是一类多重变量分析的数……

    2022年10月3日
    0
  • Kali 安装 Nessus 详细过程

    Kali 安装 Nessus 详细过程详细介绍在Kali中安装Nessus的详细过程步骤以及插件下载失败解决方法

    2022年10月19日
    0
  • left join on 和where条件的放置[通俗易懂]

    left join on 和where条件的放置[通俗易懂]select*fromtdleftjoin(selectcase_idassup_case_id,count(*)supervise_numberfromtd_kcdc_case_sup_infogroupbycase_id)suponsup.sup_case_id=td.case_idwhere

    2022年4月30日
    34

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号