JS复选框操作

最新推荐文章于 2024-03-01 09:01:11 发布

KingCruel

最新推荐文章于 2024-03-01 09:01:11 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript 文章标签： js复选框 checkbox全选

本文链接：https://blog.csdn.net/KingCruel/article/details/14223255

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

1、获取单个checkbox选中项(三种写法)：

$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、获取多个checkbox选中项：

$('input:checkbox').each(function() { 
  if ($(this).attr('checked') ==true) { 
    alert($(this).val()); 
  } 
});

3、设置第一个checkbox 为选中值：

$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值：

$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值

$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox

同时选中第1个和第2个的checkbox：
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值

$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox

$("input:checkbox[value='1']").remove();

9、删除第几个checkbox

$("input:checkbox").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个checkbox: 
$("input:checkbox").eq(2).remove();

10、遍历checkbox【动态赋值】：

$('input:checkbox').each(function (index, domEle) { 
//写入代码 
});

$.each(result.Data.EquipmentList, function (i, item) {
    $("input:checkbox[value=" + item + "]").prop('checked', true);  //好用
    $("input[name='equipments'][value=" + item + "]").attr("checked", "checked");
    $("input:checkbox[value=" + item + "]").attr('checked', true);
});

$('input[name="equipments"]:checked', dialogCreate).each(function () {
    $(this).attr('checked', false); 
    $(this).removeAttr("checked");
});

11、全部选中

$('input[name="equipments"]').prop("checked", true);//动态切换好用，推荐使用
$('input:checkbox').each(function() { 
  $(this).attr('checked', true); 
});

12、全部取消选择：

$('input[name="equipments"]').prop("checked", false);//动态切换好用，推荐使用
或
$('input:checkbox').each(function () { 
  $(this).attr('checked',false); 
});
或
$('input[name="equipments"]:checked', dialogCreate).each(function () {
    $(this).attr('checked', false); 
    $(this).removeAttr("checked");
});

*、
*、
*、
*、

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        //全选
        function checkAll() {
            var code_Values = document.all['Item'];
            if (code_Values.length) {
                for (var i = 0; i < code_Values.length; i++) {
                    code_Values[i].checked = true;
                }
            } else {
                code_Values.checked = true;
            }
        }

        //全选
        function CheckAll1(e, itemname) {
            var aa = document.getElementsByName(itemname);
            if (aa == undefined) return;
            for (var i = 0; i < aa.length; i++) aa[i].checked = e.checked;
        }

        //全选、反选
        function CheckAllAndReverse(value, obj) {
            var form = document.getElementsByTagName("form")
            for (var i = 0; i < form.length; i++) {
                for (var j = 0; j < form[i].elements.length; j++) {
                    if (form[i].elements[j].type == "checkbox") {
                        var e = form[i].elements[j];
                        if (value == "selectAll") {
                            e.checked = obj.checked
                        }
                        else {
                            e.checked = !e.checked;
                        }
                    }
                }
            }
        }

        //反选
        function uncheckAll() {
            var code_Values = document.all['Item'];
            if (code_Values.length) {
                for (var i = 0; i < code_Values.length; i++) {
                    code_Values[i].checked = false;
                }
            } else {
                code_Values.checked = false;
            }
        }

        //选中状态
        function uncheckAll() {
            //判断checkbox 是否选中
            $("#id").is(":checked");//选中，返回true，没选中，返回false

            //设置checkbox为选中状态
            $("#id").prop("checked",true);

            //设置checkbox为不选中状态
            $("#id").prop("checked",false);

            $("input:checkbox[name='Item']:checked").attr("checked", false);
            $("input:checkbox[name='Item']:checked").prop("checked", false);
            $("input:checkbox[name='Item']:checked").prop("checked", true);
            $('input[name="Item"]').removeAttr("disabled");  //移除禁用
            $('input[name="Item"]').prop("checked", false)   //移除选中
        }

    </script>
</head>
<body>
    <form>
        <table border="1">
            <tr>
                <td>方式1</td>
                <td>
                    <input id="chkOk" type="checkbox" name="chall" value="on" onclick="CheckAllAndReverse('selectAll', this)" />全选
                </td>
                <td>
                    <input id="chkNo" type="checkbox" name="invest" value="checkbox" onclick="CheckAllAndReverse()" />反选
                </td>
            </tr>
            <tr>
                <td>方式2</td>
                <td>
                    <input id="btnOk" type="button" value="全选" onclick="checkAll()" /></td>
                <td>
                    <input id="btnNo" type="button" value="反选" onclick="CheckAllAndReverse()" /></td>
            </tr>
            <tr>
                <td>方式3</td>
                <td>
                    <input name="chkall" value="1" type="checkbox" onclick="CheckAll1(this, 'Item')" />全选</td>
                <td>
                    </td>
            </tr>
            <tr>
                <td>方式4</td>
                <td>
                    <input name="chkall" value="1" type="checkbox" onclick="uncheckAll()" />取消全选</td>
                <td>
                    <input id="Button2" type="button" value="取消全选" onclick="uncheckAll()" />
                </td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <br />
        <input type="checkbox" name="Item" />1
    <input type="checkbox" name="Item" />2
    <input type="checkbox" name="Item" />3
    <input type="checkbox" name="Item" />4
    <input type="checkbox" name="Item" />5
    <input type="checkbox" name="Item" />6
    <input type="checkbox" name="Item" />7
    <input type="checkbox" name="Item" />8
    </form>
</body>
</html>