jquery checkbox学习记录

checkbox有哪些主要操作?

比如

image.png

利用js选择或者取消选择checkbox。

这个的原理是依据checkbox的checked属性来进行的。

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $("#cm").on("click",function(){
        //$("input:checkbox:first").attr("checked","true");
        //selcet the first checkbox and make it is selected
        //$("input:checkbox").eq(1).attr("checked","true");
        ////selcet the specific checkbox and make it is selected
        //$("input:checkbox").slice(0,2).attr("checked","true");
        //select both checkbox 
        //$("input:checkbox[value='1']").remove();
        //remove checkbox which value=1
        $("input:checkbox").each(function(){
            $(this).attr("checked",true)
        })
        //select all the checkbox use each function
        
        
    })
})

</script>
<html>
    <label for="male">Male</label>
    <input type="checkbox" name="sex" id="male" value="0">
    <!--for is used for making mark for input element -->
    <br>
    <label for="female">Female</label>
    <input type="checkbox" name="sex" id="female" value="1">
    <br>
    <button id="cm">click me</button>
    
</html>

注意,选择第一个复选框用first。第二个可不是用second,而是用eq()过滤。

补充一个

获取checkbox的value属性.

利用val方法

alert($("input:checkbox:checked").val())

判断选中元素个数

var len=$("input:checkbox:checked").length;
alert(len);
// calculate how many elements is selected.

限制一次只能选一个

根据length属性判断选中个数就可以了。

var len=$("input:checkbox:checked").length;
        if (len>1){
            alert("only one");

总结

牵扯到的知识点
各种选择器的用法
each遍历方法

参考

jquery操作复选框(checkbox)的12个小技巧总结jquery脚本之家
jquery操作复选框(checkbox)的12个小技巧总结jquery脚本之家

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,800评论 0 11
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,722评论 0 44
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,188评论 0 8
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,184评论 0 2
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,090评论 0 51

友情链接更多精彩内容