`

如何用js判断一个复选框是否被选中?

阅读更多
<html> <head>
        <title>
            复选框全选、全不选、反选、必选一个
        </title>
        <meta http-equiv="content-type" content="text/html;charset=GBK"/>
        <script language="javascript">
            //表单验证
            function check(){              
                var ids = document.getElementsByName("ids");              
                var flag = false ;              
                for(var i=0;i<ids.length;i++){
                    if(ids[i].checked){
                        flag = true ;
                        break ;
                    }
                }
                if(!flag){
                    alert("请最少选择一项!");
                    return false ;
                }
            }
            //全选
            function iselect(){ //其中函数字不能为select 其为JS保留字
                var ids = document.getElementsByName("ids");
                var all = document.getElementByIdx_x_x("all");              
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=all.checked;
                }
            }
            //全选
            function selectAll(){
                var ids = document.getElementsByName("ids");                          
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=true;
                }
            }
            //全不
            function selectNone(){
                var ids = document.getElementsByName("ids");                          
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=false;
                }
            }
            //反选
            function selectInvert(){
                var ids = document.getElementsByName("ids");                          
                for(var i=0;i<ids.length;i++){
                    if(ids[i].checked)
                        ids[i].checked=false ;
                    else
                        ids[i].checked=true ;
                }
            }
        </script>
    </head>
    <body>
        <form action="#" onsubmit="return check();">
        <table border="0">
            <tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>
            <tr><td><input type="checkbox" name="ids">音乐</td></tr>
            <tr><td><input type="checkbox" name="ids">短信</td></tr>
            <tr><td><input type="checkbox" name="ids">图片</td></tr>
            <tr><td><input type="checkbox" name="ids">电子书</td></tr>
            <tr><td><input type="checkbox" name="ids">铃声</td></tr>
            <tr><td><input type="checkbox" name="ids">漫画</td></tr>
            <tr><td><input type="checkbox" name="ids">游戏</td></tr>
            <tr><td><input type="checkbox" name="ids">杂志</td></tr>
            <tr><td><input type="checkbox" name="ids">新闻</td></tr>
            <tr>
                <td>
                    <a href="#" onclick="selectAll();">全选</a>&nbsp;
                    <a href="#" onclick="selectNone();">全不</a>&nbsp;
                    <a href="#" onclick="selectInvert();">反选</a>
                </td>
            </tr>
            <tr><td><input type="submit" value="提交"></td></tr>
        </table>
        </form>
    </body>
</html>


分享到:
评论

相关推荐

    jQuery如何判断checkbox(复选框)是否被选中

    在探讨如何使用jQuery判断复选框(checkbox)是否被选中的过程中,我们首先需要理解复选框的基本属性以及jQuery操作DOM元素的方式。复选框在HTML中被定义为`&lt;input type="checkbox"&gt;`,当它被选中时,其`checked`属性...

    jquery判断复选框是否被全部选中,达到全选的目的

    标题提到的“jquery判断复选框是否被全部选中,达到全选的目的”,就是针对这一需求的具体实现。下面我们将详细探讨如何利用jQuery来完成这个功能。 首先,我们需要理解jQuery库的基本用法。jQuery是一个广泛使用的...

    JS实现选中一级复选框相关二级或父级同时被选

    "JS实现选中一级复选框相关二级或父级同时被选"这个功能就是一种典型的树形结构数据的复选框关联逻辑,它涉及到JavaScript编程和DOM操作。 首先,我们需要理解这个功能的基本需求:当用户选中一级复选框时,其相关...

    BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    本篇将详细介绍如何在Bootstrap Table中实现复选框的默认选中功能,特别地,我们将根据从数据库获取的状态来决定复选框是否被选中。 首先,我们需要引入Bootstrap Table的相关库,包括CSS和JavaScript文件。这些...

    判断复选框的选择状态

    在IT界,尤其是在前端开发和用户界面设计中,"判断复选框的选择状态"是一个常见的需求,主要用于实现全选和全不选的功能。这个功能在各种列表或表格中广泛使用,比如在邮件客户端中选择多封邮件,或者在电商网站上...

    javascript复选框实现批量选择

    2. 在列表下方放置一个“全选/全不选”复选框,当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选”复选框后,列表中的所有复选框都取消选中。 3. 当列表中的复选框都取消选中后,...

    js juqery非常好用的复选框已选中的个数统计 及 js验证码 判断表单是否有选择,没有就不提交

    非常好用的复选框已选中的个数统计 及 js验证码 判断表单是否有选择,没有就不提交。代码非常简洁,个人写网站时候常用的有力帮手,自己可以下载来按需修改,不好用你找我要分。

    选中一级复选框,相关二级或父级同时被选,取消也是

    在多级复选框联动中,当用户选中一个复选框(假设为一级复选框),其所有子级复选框(二级、三级等)以及可能的父级复选框也会自动被选中。同理,当取消一级复选框时,所有相关的子级和父级复选框也会被取消选中。这...

    js判断复选框是否选中及选中个数的实现代码

    综上所述,这些代码片段展示了一个基础但实用的JavaScript功能实现:如何判断复选框是否被选中以及如何限制用户最多只能选中指定数量的复选框。代码通过直接操作DOM元素的属性来实现需求,并通过事件监听器来触发...

    layui默认选中table的CheckBox复选框方法

    方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , title: '用户列表' , page: true //开启分页 , cols: [[ {type:'...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框...通过本篇文章的学习,我们了解了如何使用 JavaScript 实现复选框的全选与取消全选功能。这种功能在很多场景下都非常实用,如购物车、表格选择等。掌握这一技能有助于提高前端开发的能力。

    js实现复选框和单选框的选择

    该功能通过调用`checkAll`函数实现,该函数接收两个参数:一个是当前被点击的“全选”复选框对象,另一个是所有相关复选框的名称。 ```javascript function checkAll(e, itemName) { var aa = document....

    js实现TreeView带复选框的联动

    2. **向上反馈**:当一个节点被取消选中时,递归地向上检查父节点的状态,并根据子节点的选中情况来决定父节点是否被选中。 通过以上步骤,可以有效地实现在TreeView中对复选框的联动控制,满足了在选择父子节点时...

    判断复选框是否被选中的两种方法

    在处理用户交互时,我们经常需要判断复选框是否被选中。本篇将详细介绍两种判断复选框状态的方法,这些方法在实际项目中得到了验证,非常适合开发者学习和应用。 ### 方法一:通过DOM属性检查 在JavaScript中,...

    js实现全选的复选框

    在JavaScript中,我们可以实现复选框的全选功能,使得用户只需点击一个主复选框,就能控制页面上所有关联复选框的状态。这种功能在表格数据筛选、多选项设置等场景中非常常见。 一、HTML基础 首先,我们需要在HTML...

    复选框的左右移动

    可以通过判断复选框当前所在的容器来实现。如果复选框在左侧,表示用户希望添加权限;反之,如果在右侧,表示用户希望移除权限。 ```javascript if ($(this).closest('.selected-permissions')) { // 移动到右侧 }...

    jquery复选框全选操作

    `$(this).is(':checked')`用于判断全选复选框是否被选中,`$('.child-checkbox').prop('checked', true/false)`则是用来改变所有子复选框的选中状态。 此外,为了完善用户体验,我们还可以添加一个反向操作,即当...

    JS判断单个checkbox是否被选中

    接下来,判断复选框是否被选中,我们可以通过检查其`checked`属性。如果`checked`属性为`true`,则表示复选框已被选中;如果为`false`,则表示未被选中。下面是一个示例: ```javascript if (myCheckbox.checked) {...

    jquery动态复选框取值

    对于复选框,我们可以用它来获取`checked`属性,判断复选框是否被选中。 ```javascript // 检查复选框是否被选中 var isChecked = $('input[type="checkbox"]').prop('checked'); ``` 2. `.val()`方法:当复选框的...

    复选框变单选框

    此外,代码还通过替换元素ID后缀的方式,实现了对同一组内其他复选框状态的控制,确保在选中一个复选框时,同组的其他复选框均处于未选状态。 ### 总结 将复选框转换为单选按钮,不仅考验开发者对于DOM操作的熟练...

Global site tag (gtag.js) - Google Analytics