TZ_09_常用jQuery操作

1.实现对chexkbox进行批量删除

checkbox属性
<td><input name="ids" type="checkbox" value="${product.id }"></td>

<script>
//删除操作        
        $("#del").click(function() {
            if(confirm("确定删除吗")){
                 var cks=document.getElementsByName("ids");
                    var str="";
                    //拼接所有的图书id
                    for(var i=0;i<cks.length;i++){
                        if(cks[i].checked){
                            str+=str+cks[i].value+",";
                        }
                    }
                    //去掉字符串末尾的‘,’
                    str=str.substring(0, str.length-1);
                 location.href="deleteProdect?strId="+str;
            }  
        });
</script>

 

 

2.拿到下拉列表框中的值当作页数返回后台

 

         <div class="form-group form-inline">
                       每页 <select class="form-control" onchange="changePageSize()" id="changePageSize">
                           <option>2</option>
                           <option>4</option>
                           <option>6</option>
                           <option>8</option>
                           <option>10</option>
                    </select> 条
         </div>

 

function changePageSize() {
            //获取下拉框的值
            var pageSize = $("#changePageSize").val();

            //向服务器发送请求，改变没页显示条数
            location.href = "${pageContext.request.contextPath}/Orders/findAllOrders?page=1&size="
                    + pageSize;
        }

 

 

3.checkbox的全选和全不选操作

 

<table id="dataList"
                                class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                    <tr>
                                        <th class="" style="padding-right: 0px;"><input
                                            id="selall" type="checkbox" class="icheckbox_square-blue">
                                        </th>
                                        <th class="sorting_asc">ID</th>
                                        <th class="sorting_desc">编号</th>
                                        <th class="sorting_asc sorting_asc_disabled">产品名称</th>
                                        <th class="sorting_desc sorting_desc_disabled">出发城市</th>
                                        <th class="sorting">出发时间</th>
                                        <th class="text-center sorting">产品价格</th>
                                        <th class="sorting">产品描述</th>
                                        <th class="text-center sorting">状态</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>


                                    <c:forEach items="${pageInfo.list}" var="product">

                                        <tr>
                                            <td><input name="ids" type="checkbox"
                                                value="${product.id }"></td>
                                            <td>${product.id }</td>
                                            <td>${product.productNum }</td>
                                            <td>${product.productName }</td>
                                            <td>${product.cityName }</td>
                                            <td>${product.departureTimeStr }</td>
                                            <td class="text-center">${product.productPrice }</td>
                                            <td>${product.productDesc }</td>
                                            <td class="text-center">${product.productStatusStr }</td>
                                            <td class="text-center">
                                                <button type="button" class="btn bg-olive btn-xs">订单</button>
                                                <button type="button" class="btn bg-olive btn-xs" onclick="location.href='${pageContext.request.contextPath}/Orders/findById?id=${product.id}'">详情</button>
                                                <button type="button" class="btn bg-olive btn-xs">编辑</button>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>

 

 

 

 

// 全选操作  
　　　　　　　<script>
            $("#selall").click(function() {
                var clicks = $(this).is(':checked');
                if (!clicks) {
                    $("#dataList td input[type='checkbox']").iCheck("uncheck");
                } else {
                    $("#dataList td input[type='checkbox']").iCheck("check");
                }
                $(this).data("clicks", !clicks);
            });
　　　　  </script>

 

 4.选中text文本框时 登陆的错误信息消失

 

$("#username").click(function() {
           $(".div1 span:last-child").css("display","none");
    });

 

转载于:https://www.cnblogs.com/asndxj/p/11409076.html