Jquery获取选中的checkbox的值

最新推荐文章于 2025-07-26 12:03:43 发布

转载最新推荐文章于 2025-07-26 12:03:43 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haozhenjie819/p/3657105.html

文章标签：

#数据库 #javascript #ViewUI

本文介绍如何使用JQuery获取已选中的多选Checkbox的值，并展示如何根据存储在数据库中的值来设置Checkbox的状态。

1、Jquery获取选中的checkbox的值（多选）

   <span><input name='cbServerType' type='checkbox' value='1'  />1111111</span>
   <span><input name='cbServerType' type='checkbox' value='2'  />2222222</span>
   <span><input name='cbServerType' type='checkbox' value='3'  />3333333</span>
   <span><input name='cbServerType' type='checkbox' value='4'  />4444444</span>
   <span><input name='cbServerType' type='checkbox' value='5' />5555555</span>

<script type="text/javascript">
        $(function () {

            $("input[name='cbServerType']:checkbox").click(function () {
                var type = '';
                $("input[name='cbServerType']:checkbox").each(function () {
                    if ($(this).attr("checked")) {
                        type += $(this).attr('value') + '|';
                    }
                });
                alert(type);
                $("#txtServerType").val(type);
            });
        }); 
    </script>

实现效果

2、Jquery从数据库读取值选中相应的checkbox（多选，以特定字符分割）

 <span><input name='cbServerType' type='checkbox' value='1'  />1111111</span>
<span><input name='cbServerType' type='checkbox' value='2'  />2222222</span>
<span><input name='cbServerType' type='checkbox' value='3'  />3333333</span>
<span><input name='cbServerType' type='checkbox' value='4'  />4444444</span>
<span><input name='cbServerType' type='checkbox' value='5' />5555555</span>
   
<input type="hidden" id="txtServerType" name="txtServerType" runat="server" value="1|2|3"  />

<script type="text/javascript">
        $(function () {
            var str = new String();
            var arr = new Array();
            str = $("#txtServerType").val();
            arr = str.split('|');
            for (var i = 0; i < arr.length; i++) {
                $("input[name='cbServerType'][value='" + arr[i] + "']").attr("checked", true);
            }
        }); 
    </script>