checkbox多选框选中执行js做动作&jq调用显示或隐藏div

<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>

复制代码
http://bbs.csdn.net/topics/390136192

方法2使用：
toggle()

<script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script>
<a herf="#">1111</a>
<div style="display：none">22222</div>




$(function (
    $('a').click(function (){
        $('div').toggle()
    })
))

设置css中display：none

http://zhidao.baidu.com/link?url=w-gJONYBhlnFBkLLY5W94V1qavnyqi-xJFYK-HkeY_LJWOkjYeOeuOtNjNeaONGDhxqc9v1i2_-W9w6iHt1at1ailQYMojZUMrEMv9IVbwW

实际应用：{这种变化是双向的}

<script language="javascript">function change() {
        $("#GLOBAL_HIDDEN").toggle(1000);
}
</script>

复制代码

另：
一次性的

<div id="GLOBAL_MORE">
                                                                                        <div class="panel-body">
                                                                                                <div class="form-group">
                                                                                                        <label class="col-sm-12 control-label"  style="text-align: left;margin-bottom: 10px;">
                                                                                                                <input type="button" onclick="change()" class="btn btn-primary" value="填写更多信息">
                                                                                                                </input>
                                                                                                        </label>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div id="GLOBAL_HIDDEN"  style=" display:none">
                                                                                        <div class="panel-body">
                                                                                                <div class="form-group">
                                                                                                        <label class="col-sm-12 control-label" style="text-align: left;margin-bottom: 10px; ">站长邮箱:</label>
                                                                                                        <div class="col-sm-12">
                                                                                                                <input type="text" name="zhanzhangyouxiang" class="form-control" data-trigger="hover" title=""  placeholder="例：webmaster@52x2.com" style="" value="<?php echo $config['email']; ?>">
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>

复制代码

上面有用的就两个标签：

<div id="GLOBAL_MORE">1111  </div>

<div id="GLOBAL_HIDDEN">222</div>




<script language="javascript">function change() {
        $("#GLOBAL_HIDDEN").show(1000);
        $("#GLOBAL_MORE").hide(1000);
}
</script>

复制代码

---

<ul >
      
      <li><p class="p1"><span>张三</span><em>2014-1-21 17:36:52</em></p>
      <p class="p2">你好，我是嘻嘻嘻，我想和你聊聊</p>
       
      <p class='reply' >回复</p>
       
      <div style="display:none;" id="reply">
       开始隐藏，点击回复时显示
      </div>
       
      </li>
       
      <li><p class="p1"><span>李四</span><em>2014-1-21 17:42:18</em></p>
      <p class="p2">你好，你好你好霓虹啊</p>
       
      <p  class='reply'>回复</p>
       
      <div style="display:none;" id="reply">
       开始隐藏，点击回复时显示
      </div>
<li><p class="p1"><span>QQ</span><em>2014-1-21 17:42:18</em></p>
      <p class="p2">你好，你好你好啊</p>
       
      <p  class='reply'>回复</p>
      <div style="display:none;" id="reply">
       开始隐藏，点击回复时显示
      </div>
       
      </li>
     </ul>
<script>
var ps = document.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
if(ps[i].className='reply'){
  ps[i].onclick=function(){
   this.nextSibling.style.display='';
  }
}
}
</script>

复制代码

注意： this.nextSibling.style.display=’’;为隐藏的js

可用例文：http://www.jb51.net/article/43026.htm

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
$("#show").click(function(){
$("p").show(1000);
});
});
});
</script>

<p>

大家好，欢迎学习jquery
</p>

<button id="show">显示</button>
<button id="hide">隐藏</button>

---

<a href="javascript:void(0)" onclick="change()" class="btn btn-primary">填写更多信息</a>

复制代码

注意：必须使用href="javascript:void(0)"和a标签搭配，否则苹果和手机部分会跳转而不会直接执行js函数。