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>

    实现的效果

  • 相关阅读:
    C#_MVC_ajax for form
    C#_ajax_demo
    robot framework——UI——背诵整理——001
    没有-jackson相关依赖会抛出如下异常--------在spring官方文档有解释
    Controller中方法返回值其他类型需要添加jackson依赖
    类和JSP关系
    IDEA抛出No bean named 'cacheManager' available解决方法
    IDEA中tomcat的部署
    IDEA项目的复制操作
    IDEA项目找不到浏览器报错的情况
  • 原文地址:https://www.cnblogs.com/haozhenjie819/p/3657105.html
Copyright © 2011-2022 走看看