求一个简单的js代码,根据多个复选框选项选择后,超链接地址改变



就像一个咨询xu’a页面,然后有多个问题通过复选框选择后,用户点击底部的前往按钮即可前往相对应的页面,用户不同的选项组合会改变超链接地址

今天回答了个百度知道的问题,百度限制太多,大一点的动态图片都传不上去,遂来网站作答。

上图镇楼:

求一个简单的js代码,根据多个复选框选项选择后,超链接地址改变

首先,不知道你说的哪个咨询页面。

来说下我的思路(根据例子):

1、有三个复选框组,每个复选框组有三个答案,答案的分数分别为 1,2,3。选择一个答案,则进行相应的加法运算,得出总分数;取消选择一个答案,则进行相应的减法运算,得出总分数。

2、根据最后的得分来决定如何更改链接。小于10,则跳转到链接1;大于10小于20,则跳转到链接2。

3、每个复选框组至少需要选择一个答案。

例子:

<form style="margin: 150px">
	<label>复选1组:</label>
	<input type="checkbox" name="checkbox1" value="1"/>回答1
	<input type="checkbox" name="checkbox1" value="2"/>回答2
	<input type="checkbox" name="checkbox1" value="3"/>回答3
	<br>
	<label>复选2组:</label>
	<input type="checkbox" name="checkbox2" value="1"/>回答1
	<input type="checkbox" name="checkbox2" value="2"/>回答2
	<input type="checkbox" name="checkbox2" value="3"/>回答3
	<br>
	<label>复选3组:</label>
	<input type="checkbox" name="checkbox3" value="1"/>回答1
	<input type="checkbox" name="checkbox3" value="2"/>回答2
	<input type="checkbox" name="checkbox3" value="3"/>回答3
	<br>
	<a id="maosiji" href="" style="background: dodgerblue; margin-top: 15px; color: #FFF; padding: 5px; text-decoration: none; display: inline-block;">猫斯基的百变超链接</a>
	<span id="count"></span>
</form>
<script>
	$(function(){
		
		// 判断所有的 checkbox组 是否都已经至少选中一个答案
		$('#maosiji').click(function(){
			if ( ($("input:checkbox[name='checkbox1']:checked").length <= 0) || ($("input:checkbox[name='checkbox2']:checked").length <= 0) ||($("input:checkbox[name='checkbox3']:checked").length <= 0) ) {
				alert('猫斯基提醒:每个复选框组至少选一个!');
				return false;
			}
		})
		
		$n = 0;
		$num = 0;
		// 改变超链接
		$('input:checkbox').change(function(){
			$n++;
			
			// 判断是选中还是取消
			if ( $(this).prop("checked") ) {
				$num = $num*1 + $(this).val()*1;
			} else {
				$num = $num*1 - $(this).val()*1;
			}
			
			$('#count').html('<span style="font-size:12px;margin-left: 15px;">你选择了<span style="color:red;font-size: 20px;">' + $n +'</span>次!目前的影响值为 <span style="color:red;font-size: 20px;">' + $num +'</span></span>');
			
			// 根据分数来决定改变链接
			if ( $num <= 10 ) {
				$('#maosiji').attr('href', 'https://jianzhanmi.com');
			}
			else if ( 10 < $num < 20 ) {
				$('#maosiji').attr('href', 'http://maosiji.jianzhanmi.com');
			}
			
		})
		
	})
</script>

<< jQuery 获得随机数
工作中
  • 作者 建站迷

    建站迷

    让天下没有难做的网站!
    解决中小型企业的无站之伤。



没有账号? 忘记密码?

社交账号快速登录