jquery脚本的几个常用方法:

    1.多选框回显:

var xids = '${order.xids}'; //xids = 1,3,4
//回显之前被选中的选项
$("[name='xid']").each(function(){
        var xid = $(this).val();
    if(xids.indexOf(xid)>-1){
        $(this).attr("checked",true);
    }
  });

  2.如果列表每条数据前是多选框,需要单击实时触发事件

单击checkbox会触发的函数,给checkbox一个这个事件onclick="checkboxOnclick(this)"

function checkboxOnclick(checkbox){
var sumprice = 0;
$("[name='xid']:checked").each(function(){
var a = $(this).next().val();
//parseInt(a)将a转换成为Int类型,这样就能计算了,如果不转换会是拼接
sumprice = parseInt(a) + sumprice;
});
$("[name='sum1']").val(sumprice);
$("[name='sumprice']").val(sumprice);
}
页面代码:<input type="checkbox" name="xid" value="${x.xid}" onclick="checkboxOnclick(this)">

3.页面中获取多选框被选中的值

//附表里的xid拼接的字符串
var xids = $("[name='xid']:checked").map(function(){
return $(this).val();
}).get().join();

4.如何获取被选中的多选或单选框所对应的其他的值可以给他这个标签里加上个隐藏的值

$("[name='xid']:checked").each(function(){
var a = $(this).next().val();
});

5.实现购物车加减并且把更改后数据发送到后台,前台代码

<script type="text/javascript">
        function back() {
        if(confirm("是否保存修改的商品?")){
            var message = $("[name='gid']").map(function(){
            return $(this).val();
        }).get().join();
    var number = $("[name='number1']").map(function(){
            return $(this).val();
        }).get().join();
    $.post("save.do",{"message":message,"number":number},function(i){
            history.go(-1);
        },'json'); 
    }else{
location = "goodsList.do";
        }
}
$(function() {
        $(".jia").click(function() {
        var n = $(this).prev().val();
        var num = parseInt(n) + 1;
    if (n ==5 ) {
          alert("单个商品最大数量为5!");
    }else{
            $(this).prev().val(num);
            var price =  $(this).next().val();
            $(this).parent().parent().find("td:eq(4)").text(parseInt(price)*parseInt(num));
        }
});
$(".jian").click(function() {
            var n = $(this).next().val();
            var num = parseInt(n) - 1;
        if (num == 0) {
            if(confirm("该商品数量已经为1,确定要删除?")){
                var gid = $(this).prev().val();
                $.post("deletegw.do",{"gid":gid},function(i){
                    if(i>0){
                        history.go(0);
                        }
            },'json');
    }
}else{
        $(this).next().val(num);
         var price =  $(this).next().next().next().val();
        $(this).parent().parent().find("td:eq(4)").text(parseInt(price)*parseInt(num));
    }

   });

});
</script>
</head>
<body>
    <input type="button" value="返回" onclick="back()">
<table>
    <tr>
        <td>名称</td>
        <td>所属品牌</td>
        <td>价格</td>
        <td>数量</td>
        <td>小计</td>
    </tr>
    <c:forEach items="${mygoodsList}" var="m">
    <tr>
        <td>${m.gname }</td>
        <td>${m.gchinabrand}</td>
        <td>${m.gprice}</td>
    <td>
        <input type="hidden" name="gid" value="${m.gid}">
        <input class="jian" type="button" value="-">
        <input type="text" name="number1" value="${m.number}"> 
        <input class="jia" type="button" value="+">
        <input type="hidden" name="price" value="${m.gprice}">
    </td>
    <td>${m.sumprice}</td>
    </tr>
    </c:forEach>
</table>
</body>
</html>

6.原生ajax

$.ajax({
	type:"post",
	url:"${pageContext.request.contextPath}/updateObject",
	data:$("form").serialize(),
	success:function(obj){
		if(obj.uid!=null){
			alert("编辑成功!");
			location = "${pageContext.request.contextPath}/userList";
		}else{
			alert("编辑失败!");
			}
		}
	});

7.全选全不选反选

$("#ckb").click(function() {
	$("[name='ck']").each(function() {
		if ($(this).attr("checked")) {
			$(this).attr("checked", false);
		} else {
			$(this).attr("checked", true);
		}
	});
});


猜你喜欢

转载自blog.csdn.net/qq_41950069/article/details/80780493