问题描述
做项目的时候，有一个页面有这样的需求。
这个页面大概就是下图这样
需求一、动态获取产品名称
需求二、动态获取被选中的复选框的内容
需求三、点击保存按钮时，获取form表单中的数据，成功之后，跳转到其他页面
需求四、只输入产品名称不勾选产品功能时，会提示请勾选功能，同理，只勾选功能，不输入产品名称，会提示输入产品名称，当两者都不输入内容时，会都提示。
需求五、点击重置按钮，勾选的复选框全部变为未选中状态。
需求六、只有产品名称和产品功能都有的时候，点击保存按钮才会跳转到另一个页面。
这些需求都很好写，我就不描述了，我想在这里谈一下需求五，这个需求将近花了一两个小时才研究出来（我也是前端没学多久的小白）。所以在这里说一说遇到的坑，以及最后是怎么解决的。
遇到的坑
我刚开始的想法是给button绑定点击事件，然后在这个点击事件里去写上面部分需求，操作了一番，需求写完了，但就差最后一步，就是点击button时，获取数据的同时，跳转到另一个页面，于是就在网上查了很多资料，都满足不了我想要的效果，比如说
1.在原来的窗体中直接跳转用
代码如下
window.location.href="你所要跳转的页面";
2、在新窗体中打开页面用：
代码如下
window.open(‘你所要跳转的页面’);
window.history.back(-1);返回上一页
代码如下
<input type="submit" name="Submit" value="同意" onclick=window.open(xxx.html)>
JS跳转页面参考代码:
第一种：
<script language="javascript" type="text/javascript">window.location.href="login.jsp?backurl="+window.location.href;</script>
第二种：
<script language="javascript">alert("返回");window.history.back(-1);</script>
第三种：
<script language="javascript">window.navigate("top.jsp");</script>
第四种：
<script language="JavaScript">self.location='top.htm';</script>
第五种：
<script language="javascript">alert("非法访问！");top.location='xx.jsp';</script>
注意
这些方法都解决不了我的需求，上面的这些只是用来进行直接跳转页面，并满足不了我获取到数据之后再跳转的需求。
解决办法
后来突然来了个想法，我在button里面嵌套一个a链接，将点击事件绑定在a的身上，这样就可以利用a本身的href属性，再结合用jquery去编写逻辑代码，控制href属性的变化。这样就能满足需求了，简单的描述一下思路：
1、首先我要获取form表单数据，这个逻辑代码简单我就不赘述了，下面直接看代码，一看就懂。
2、我要实现提示的需求，也就是上面描述的需求四，这个需求思路就是动态添加一个div，通过if…else…去控制其什么时候显示。
3、重置按钮需求也简单，看代码。
4、重点是当点击按钮时，所发生的一系列操作。
1）当点击按钮的时候，会动态获取当前的产品名称，和所勾选的复选框所对应的功能名字。
2）如果正常情况下，即产品名称输入了，功能也勾选了，那么此时点击button按钮，会弹出所获取到的信息（这里是模拟接收数据），当这些警告框弹完之后就会跳转到指定的页面。
3）如果没输入产品名称或者没勾选功能，点击button时，都会给出相应的提示，并且最终也不会发生跳转。
下面直接上代码，希望能帮到有需要的朋友
主要的html代码
<div class=" w createProduct">
<p class="hd_nav">
<a href="productList.html">产品列表</a>
<span class="Separator">/</span>
<span>创建新产品</span>
</p>
<hr>
<form action="" method="get" id="form-sub">
<div class="productName">
<span>产品名称:</span>
<input type="text" placeholder="请填写产品名称" name="product_name" id="product_name" value="">
</div>
<div class="productFun">
<p>产品功能<span>*温馨提示：可选择多个*</span></p>
<ul></ul>
<div class="btn">
<input type="button" name="" id="reset" value="重置">
</div>
</div>
<p class="save">产品保存:
<span>
<button ><a href="productDetails.html" id="sub">保存</a></button>
</span>
</p>
</form>
</div>
主要的js代码
/* 动态创建li */
function createLI() {
for (var i = 0; i < 20; i++) {
var oLi = document.createElement('li');
var oInput = document.createElement('input');
oInput.setAttribute("id", i); //添加input元素属性
oInput.setAttribute("type", "checkbox");
oInput.setAttribute("value",data[i].funName);
var oLable = document.createElement('label');
oLable.setAttribute("for", i);
oLable.innerHTML = data[i].funName;
oLi.appendChild(oInput);
oLi.appendChild(oLable);
var oUl = document.getElementsByTagName('ul')[1];
oUl.appendChild(oLi);
}
}
/* 获取form表单数据 */
/* 获取被选中复选框中对应的数据 */
var type = []; //定义数组用来存放数据
/* 注意：这里是给button中a绑定的点击事件，目的为了实现获取数据的同时跳转页面 */
$('#sub').click(function() {
/* event.preventDefault(); */
//遍历后把值放到数组中，这样type数组就是当前复选框选中的所有数据
$("#form-sub input[type='checkbox']:checked").each(function(){
type.push($(this).val());
});
/* 获取当前输入的产品名称 */
var prodName = $("#form-sub input[name='product_name']").val();
/* 获取a */
var tzLink = $('#sub');
/* 分情况讨论 */
if(($("#product_name").val() == "") && type.length == 0){
addAlertName(); //提示没有输产品名称
addAlertFun(); //提示没有勾选功能
tzLink.attr('href','javascript:void(0);');
}else if($("#product_name").val() == ""){
addAlertName();
/* 写下面这句话的原因是因为没写这句话之前有小bug
bug描述：
进入页面只勾选功能复选框，而不输入产品名称，这时点击保存按钮，页面会提示输入产品名称
与此同时，勾选的功能复选框已经被存放到type数组中了
所以，如果不写type.length=0；这句话，就意味着在刚才有提示的页面补上产品名称，再次点击保存时
type数组会再一次保存刚才勾选的功能复选框的功能
写上这句话，就会更新数组，让其为空
*/
type.length = 0;
tzLink.attr('href','javascript:void(0);'); //这种情况下禁止跳转，因为信息没有输入完整
}else if(type.length == 0){
addAlertFun();
tzLink.attr('href','javascript:void(0);');
}else{
/* console.log(prodName); */
alert(prodName);
for(var i=0; i<type.length;i++){
alert(type[i]);
}
tzLink.attr('href','productDetails.html');
}
})
/* 动态添加提示div */
function addAlertName() {
var alertName = $('<div></div>');
alertName.attr('class','alertName');
alertName.text('*请填写产品名称*');
alertName.appendTo($('.productName'));
}
function addAlertFun() {
var alertName = $('<div></div>');
alertName.attr('class','alertFun');
alertName.text('*请勾选产品功能*');
alertName.appendTo($('.productFun'));
}
/* 点击重置按钮时，被选中的复选框全部变为未选择 */
$("#reset").click(function() {
$("input[type='checkbox']:checked").prop("checked",false);
})
今天的分享就到这里了，但愿不白写，可以帮到有需要的朋友。