復(fù)選框和文本框的聯(lián)動(dòng)效果

2012/11/1 11:19:45作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

復(fù)選框和文本框的聯(lián)動(dòng)效果JS代碼怎么寫(xiě)

【實(shí)例描述】

所謂聯(lián)動(dòng)效果就是一個(gè)控件不能用時(shí)，另一個(gè)控件也不能用。本例學(xué)習(xí)復(fù)選框和文本框的聯(lián)動(dòng)效果。當(dāng)復(fù)選框沒(méi)被選中時(shí)，文本框處于不可用狀態(tài)。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（m.wangbatian.cn）</title>
<script language="javascript">
function chk(obj,txtIndex)
{
 var tmpInput = document.getElementsByName("textfield")[txtIndex]; 
//獲取指定的文本框
 obj.checked?tmpInput.disabled=false:tmpInput.disabled=true;   
      //判斷文本框是否處于選中狀態(tài)
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <input name="che" type="checkbox" value="" onclick="chk(this,'0')"/>
  <input type="text" name="textfield" disabled=true /><BR/>
  <input name="che" type="checkbox" value="" onclick="chk(this,'1')"/>
  <input type="text" name="textfield" disabled=true /><BR/>
  <input name="che" type="checkbox" value="" onclick="chk(this,'2')"/>
  <input type="text" name="textfield" disabled=true /><BR/>
</form>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

設(shè)置文本框是否可用的屬性是“disabled”，其值為“true”表示不可用，為“false”表示可用。在“chk”方法中，使用“obj”獲取頁(yè)面中所有的文本框，通過(guò)第二個(gè)參數(shù)“txtIndex”判斷當(dāng)前應(yīng)該對(duì)應(yīng)哪個(gè)文本框：三元運(yùn)算符“表達(dá)式?值1：值2”用來(lái)表示當(dāng)復(fù)選框選中時(shí)文本框設(shè)置為可用，否則為不可用。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：復(fù)選框和文本框的聯(lián)動(dòng)效果進(jìn)行本實(shí)例源碼下載

標(biāo)簽：復(fù)選框文本框