jQuery如何操作checkbox

最新推荐文章于 2021-12-28 09:17:51 发布

wz122889488

最新推荐文章于 2021-12-28 09:17:51 发布

阅读量731

点赞数

分类专栏： jQuery 文章标签： checkbox 选中全选值

本文链接：https://blog.csdn.net/wz122889488/article/details/9149199

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts\jquery-1.4.1.min.js" type="text/javascript"></script>
    <title>点击隐藏</title>
    <script type="text/javascript">
        $(document).ready(function () {

            //给所有checkbox添加click事件
            $('input:checkbox').bind('click', function (data) {
                SetCheckBox(data);
            });
            function SetCheckBox(data) {
                //alert('当前是否选中：' + data.target.checked);
            }

            //全选
            $('#btn1').click(function () {
                $(':checkbox').attr('checked', true);
            });
            //取消全选
            $('#btn2').click(function () {
                $(':checkbox').attr('checked', false);
            });
            //反选
            $('#btn3').click(function () {
                //$(':checkbox').each(function () {});         //所有的checkbox
                //$('input[name="chkN"]').each(function () {});//name="chkN"的checkbox
                $(':checkbox').each(function () {
                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");
                        //$(this).attr("checked", false);//此行代码和$(this).removeAttr("checked");效果一样
                    }
                    else {
                        $(this).attr("checked", "true");
                    }
                });

            });
            //选中所有奇数
            $('#btn4').click(function () {
                $("input[name='chkN']:even").attr("checked", "true");
            });
            //选中所有偶数
            $('#btn5').click(function () {
                $("input[name='chkN']:odd").attr("checked", "true");
            });

            //获得选中的所有值
            var chkValues = "";
            $('#btn6').click(function () {
                chkValues = "";
                //$("input[name='chkN']:checkbox:checked")//根据name，":checkbox"
                //$("input[type=checkbox]:checkbox:checked")//所有checkbox
                $("input[type=checkbox]:checked").each(function () {
                    chkValues += $(this).val() + "  ";
                });
                alert(chkValues);
            });

            //checkbox里的value有在(1000,3000,4000,8000)中就勾选
            $('#btn7').click(function () {
                var filter = "1000,3000,4000,8000";
                var list = filter.split(",");
                $(":checkbox").each(function () {
                    $(this).attr("checked", $.inArray(this.value, list) > -1);
                });
            });

            //显示当前选中的行信息
            $('#btn8').click(function () {
                var str = "";
                $("input[type=checkbox]:checked").each(function () {
                    str += $(this).parent('td').parent('tr').find('.city').text()
                });
                alert(str); //如果要去掉空格： str=$.trim(str);
                
            });


        });     //end  $(document).ready


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="btn1" value="全选" />
        <input type="button" id="btn2" value="取消全选" />
        <input type="button" id="btn3" value="反选" /><br />
        <input type="button" id="btn4" value="选中所有奇数" />
        <input type="button" id="btn5" value="选中所有偶数" />
        <input type="button" id="btn6" value="获得选中的所有值" /><br />
        <input type="button" id="btn7" value="checkbox里的value有在(1000,3000,4000,8000)中就勾选" />
        <input type="button" id="btn8" value="显示当前选中的行信息" />
    </div><br />
    <table border="1" width="300px">
        <tr>
            <td>
                <input type="checkbox" id="chk" name="chkN" class="chkC" value="1000" />
                <!--for 属性规定 label 与哪个表单元素绑定。 http://www.w3school.com.cn/tags/att_label_for.asp -->
                <label for="chk">
                    甘肃[1000]</label>
            </td>
            <td id="LZ" class="city">
                  兰州
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="Checkbox1" name="chkN" class="chkC" value="2000" />
                <label for="Checkbox1">
                    陕西[2000]</label>
            </td>
            <td id="XZ" class="city">
                  西安
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="Checkbox2" name="chkN" class="chkC" value="3000" />
                <label for="Checkbox2">
                    湖北[3000]</label>
            </td>
            <td id="WH" class="city">
                  武汉
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="Checkbox3" name="chkN" class="chkC" value="4000" />
                <label for="Checkbox3">
                    河南[4000]</label>
            </td>
            <td id="ZZ" class="city">
                  郑州
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="Checkbox4" name="chkN" class="chkC" value="5000" />
                <label for="Checkbox4">
                    湖南[5000]</label>
            </td>
            <td id="CS" class="city">
                  长沙
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="Checkbox5" name="chkN" class="chkC" value="6000" />
                <label for="Checkbox5">
                    安徽[6000]</label>
            </td>
            <td id="HF" class="city">
                  合肥
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

wz122889488

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery如何操作checkbox

点击隐藏 $(document).ready(function () { //给所有checkbox添加click事件 $('input:checkbox').bind('click', function (data) { SetCheckBox(data); });
复制链接

扫一扫