首页 > JS专栏 > JS控制单选框联动
2015
05-03

JS控制单选框联动

那天正在写代码的过程中,突然写到支付方式,这个是要用单选框做联动,实在想不出,只要上网找,最后整理出来给大家用。如图:

1、当用户点击“余额支付”时,“在线支付”和支付宝都属于没选中状态且“支付宝”属于不可选状态,反之亦然。

实现过程:

html代码:

<form name="payment_form" action="payment.php" method="post">
  <!-- 支付宝/财付通/网银在线支付 -->
   <div><input type='radio' name='payment' value='otherpayment' checked  onclick="otherpays()";>在线支付</div>
   <div>
     <ul>
	   <li><input type="radio" id='otherpayment' name="otherpayment" value="alipay" checked><span class="logo"><img src="alipay.gif" alt="支付宝" title="支付宝"  width="120" height="50"></span></li>
	 </ul>
   </div>
   <!-- 余额支付 -->
   <div><input type='radio' name='payment' value='predeposit' onclick="predeposit()";>余额支付</div>
   <div class="yue">支付密码:<input type="password" name="pay_password"/></div>
</form>

js代码:

<script type='text/javascript'>
/*点击使用余额支付*/
function predeposit(){
  	  document.payment_form.otherpayment.disabled=true;
	  document.payment_form.otherpayment.checked=false;
  }
/*点击使用网银支付*/
function otherpays(){
  	  document.payment_form.otherpayment.disabled=false;
	  document.payment_form.otherpayment.checked=true;
  }
</script>

最后说一下,

<img src="alipay.gif" alt="支付宝" title="支付宝"  width="120" height="50">

,请修改这里的图片路径!如果多种支付方式,请在js中使用数组,例如

document.payment_form.otherpayment[0].disabled=true;
document.payment_form.otherpayment[1].disabled=true;


留下一个回复