checkbox点击事件

php112 2012-07-16 11:46:55 


  <table>

  <tr>

  <td>  

  <input name="bay" type="checkbox" value="100">100元月卡

  <input name="bay" type="checkbox" value="200">200元季卡

  <input name="bay" type="checkbox" value="300">300元半年卡

  <input name="bay" type="checkbox" value="400">400年卡

  </td>

  </tr>

    <tr>

  <td>  

  <a href="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay=100&title=付款100元，购买100元月卡" target="_blank">付款</a>

  </td>

  </tr>

  </table>


如何实现选择哪个checkbox，下面的链接中的"pay=100&title=付款100元，购买100元月卡" 就变化
...全文
7922 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
php112 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]
不熟悉JS的话，很多事情你都做不了啊。。。

简单示意下，自己理解了再修改吧：


HTML code

<script>
function changeHref(obj) {
var target = document.getElementById("aPay"); // 查找目标对象
target.href = "https://www.abc.com/ok.htm……
[/Quote]


<script>
function changeHref(obj) {
var target = document.getElementById("aPay"); // 查找目标对象
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value + obj.title; // 修改A标签
}
</script>
<table>
<tr>
<td>
<input name="bay" type="radio" value="100" title="月卡" onclick="changeHref(this);">100元月卡
<input name="bay" type="radio" value="200" title="季卡" onclick="changeHref(this);">200元季卡
<input name="bay" type="radio" value="300" title="半年卡" onclick="changeHref(this);">300元半年卡
<input name="bay" type="radio" value="400" title="年卡" onclick="changeHref(this);">400年卡
</td>
</tr>
<tr>
<td>
<a id="aPay" href="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay=100&title=付款100元，购买100元月卡" target="_blank">付款</a>
</td>
</tr>
</table>


这样怎么不能加入两个参数呢
夜空中苦逼的程序员 2012-07-16
  • 打赏
  • 举报
 回复
ls 你太帅了~~
MiceRice 2012-07-16
  • 打赏
  • 举报
 回复
不熟悉JS的话，很多事情你都做不了啊。。。

简单示意下，自己理解了再修改吧：

<script>

function changeHref(obj) {

  var target = document.getElementById("aPay"); // 查找目标对象

  target.href = "https://www.abc.com/ok.htm?pay=" + obj.value; // 修改A标签

}

</script>

<table>

  <tr>

    <td>  

      <input name="bay" type="checkbox" value="100" onclick="changeHref(this);">100元月卡

      <input name="bay" type="checkbox" value="200" onclick="changeHref(this);">200元季卡

      <input name="bay" type="checkbox" value="300" onclick="changeHref(this);">300元半年卡

      <input name="bay" type="checkbox" value="400" onclick="changeHref(this);">400年卡

    </td>

  </tr>

  <tr>

    <td>  

      <a id="aPay" href="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay=100&title=付款100元，购买100元月卡" target="_blank">付款</a>

    </td>

  </tr>

</table>
php112 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]
熟悉JS脚本么？无非是给input标签增加 onclick 事件而已。

然后在onclick事件中，完成修改 A 标签的href动作。
[/Quote]

不熟悉js ，能详细一下吗，谢谢
MiceRice 2012-07-16
  • 打赏
  • 举报
 回复
熟悉JS脚本么？无非是给input标签增加 onclick 事件而已。

然后在onclick事件中，完成修改 A 标签的href动作。
hepeng_8 2012-07-16
  • 打赏
  • 举报
 回复
<script>
function changeHref(obj) {
var target = document.getElementById("aPay"); // 查找目标对象
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value; // 修改A标签
}
</script>
MiceRice 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 的回复:]
target="_blank"这个还要的基础上能在本页直接判断吗？
[/Quote]

这个确实会有问题，它会强制打开新页面。

最好把这个设置放到 function 去，最后一句话：
target.target = "_blank";
php112 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 的回复:]
用超链接做选择，本来就不正规，现在只好越来越不正规了：
<a id="aPay" href="javascript:void(alert('请先选择卡种'));" target="_blank">付款</a>
[/Quote]


target="_blank"这个还要的基础上能在本页直接判断吗？
枫醉秋 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

不熟悉JS的话，很多事情你都做不了啊。。。

简单示意下，自己理解了再修改吧：

HTML code
<script>
function changeHref(obj) {
var target = document.getElementById("aPay"); // 查找目标对象
target.href = "https://www.abc.com/ok.htm?pay="……
[/Quote]

+1
错在葡萄 2012-07-16
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

	function change(obj){

	document.getElementById("theA").src="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay="+obj.value+"&title="+obj.title;

		

	}

</script>

</head>



<body>

<form id="form1" name="form1" method="post" action="">

<table>

  <tr>

  <td>  

  <input name="bay" type="radio" value="100" onclick="change(this)" title="100元月卡">100元月卡

  <input name="bay" type="radio" value="200" onclick="change(this)" title="200元月卡">200元季卡

  <input name="bay" type="radio" value="300" onclick="change(this)" title="300元月卡">300元半年卡

  <input name="bay" type="radio" value="400" onclick="change(this)" title="400元月卡">400年卡

  </td>

  </tr>

    <tr>

  <td>  

  <a id="theA" href="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay=100&title=付款100元，购买100元月卡" target="_blank">付款</a>

  </td>

  </tr>

  </table>

</form>

</body>

</html>
MiceRice 2012-07-16
  • 打赏
  • 举报
 回复
用超链接做选择，本来就不正规，现在只好越来越不正规了：
<a id="aPay" href="javascript:void(alert('请先选择卡种'));" target="_blank">付款</a>
php112 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 的回复:]
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value + "&title=" + obj.title + "&time=" + (new Date()).toString();

不过时间的格式恐怕不是你想要的效果。
[/Quote]

那就不使用时间了，麻烦您给写一个，如果没有选择是点击下面的连接就提示选择，好吗？谢谢您了。
cxw3152 2012-07-16
  • 打赏
  • 举报
 回复
<script>
function changeHref(obj) {
var target = document.getElementById("aPay"); // 查找目标对象
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value; // 修改A标签
}
</script>
<table>
<tr>
<td>
<input name="bay" type="checkbox" value="100" onclick="changeHref(this);">100元月卡
<input name="bay" type="checkbox" value="200" onclick="changeHref(this);">200元季卡
<input name="bay" type="checkbox" value="300" onclick="changeHref(this);">300元半年卡
<input name="bay" type="checkbox" value="400" onclick="changeHref(this);">400年卡
</td>
</tr>
<tr>
<td>
<a id="aPay" href="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay=100&title=付款100元，购买100元月卡" target="_blank">付款</a>
</td>
</tr>
</table>
可以。。
MiceRice 2012-07-16
  • 打赏
  • 举报
 回复
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value + "&title=" + obj.title + "&time=" + (new Date()).toString();

不过时间的格式恐怕不是你想要的效果。
php112 2012-07-16
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 的回复:]
参数要有参数名才行啊：
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value + "&title=" + obj.title; // 修改A标签
[/Quote]

最后一问，怎么在target.href = "https://www.abc.com/ok.htm?pay=" + obj.value + "&title=" + obj.title; // 之中加入当前时间，如7月16日14点35分
greenxingqing 2012-07-16
  • 打赏
  • 举报
 回复
楼上完全正确，js处理非常方便了
MiceRice 2012-07-16
  • 打赏
  • 举报
 回复
参数要有参数名才行啊：
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value + "&title=" + obj.title; // 修改A标签
checkbox点击事件修改样式
由于需要个性化checkbox的点击事件，不得以研究了一下点击事件。奈何这个项目组居然没有checkbox的样式，看着这原生的样式丑到爆，不得以研究了一下checkbox。（radio也是同理，区别是最好通过条件控制只能单选。） ...
Jquery为单选框checkbox绑定单击click事件
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧，需要了解的朋友可以参考下
Qt5(C++)高级篇之6：QML常用控件自定义组件及多媒体入门
1.带领您深入学习QT5/C++：QML常用控件编程、QML的多媒体入门、逐步提升Qml编程水平。2.所有章节均有理论知识介绍、接口讲解、实例代码讲解，讲解过程中不断穿插老师在开发过程中遇到的问题及解决方法（可以下载所有...
关于表格（table）中checkbox等相关事件操作（动态添加行+隔行换色等相关）（jquery）
今天上午对checkbox相关事件整合了下，运用jquery相关知识，整理table中隔行换色，选中变色，全选，反选等操作，并且对table动态添加行进行了相关整理。
ListView和CheckBox结合_以及CheckBox复用_以及CheckBox设置点击事件的效率问题
ListView和CheckBox结合_以及CheckBox设置点击事件的效率问题 其中实现的功能是： 1.选择一个条目后，回到第二个界面，条目内容要在第一个界面展示 2.CheckBox的条目被选中后，下拉时其它条目也有被选中问题 3.当...
Web 开发

81,094

社区成员

341,711

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章