Jquery获取选中的checkbox的值

时间 2019-12-02 标签 jquery 获取选中 checkbox 值

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

   <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>

实现效果java

二、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>

实现的效果this