zoukankan      html  css  js  c++  java
  • Jquery获取选中的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>

    实现的效果

  • 相关阅读:
    open stack总结
    Nginx操作命令
    Nginx 配置详解
    Linux 常用命令-- top
    CEPH 使用SSD日志盘+SATA数据盘, 随OSD数目递增对性能影响的递增测试
    MyCat水平分库
    MyCat垂直分库
    MyCat基本知识
    utf8mb4复杂昵称问题
    Power安装linux-BIG ENDIAN mysql编译安装
  • 原文地址:https://www.cnblogs.com/haozhenjie819/p/3657105.html
Copyright © 2011-2022 走看看