js获取单选按钮(radio)组的值来控制tr td

最新推荐文章于 2021-06-20 13:05:23 发布

原创最新推荐文章于 2021-06-20 13:05:23 发布 · 603 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js控制tr td #js #radio #ViewUI

front 同时被 2 个专栏收录

40 篇文章

订阅专栏

jtmpl-file

15 篇文章

订阅专栏

本文介绍了一种基于JavaScript的PSAM卡号录入方式切换功能的实现方法。通过单选按钮选择不同的录入方式（单条录入或批量录入），并根据所选方式动态显示或隐藏相应的输入框。此外，还涉及如何通过JavaScript操作DOM元素来改变元素的可见性及为隐藏域赋值。

<script type="text/javascript" src="js/jquery.js"></script>
<script>
function checks(){
    var radios=document.getElementsByName("psam");
    for(var i=0;i<radios.length;i++){
    	//alert($("input[name='psam'][checked]").val()); 
        if(radios[i].checked==true){
            if((radios[i].value)==2){
        	document.getElementById( "psamcodeend").style.display= "inline";
       	 	$("#hidone").val("2"); //给隐藏域赋值
         	}
        }
       if(radios[i].checked==true){
        if((radios[i].value)==1){
		//none是不显示，inline是内联式显示，不换行
            document.getElementById( "psamcodeend").style.display= "none";
            document.getElementById("psamcodeend").value = "";
            $("#hidone").val("1");
        }
       }
    }
}
window.onload = checks ; //页面加载完成时执行一次该js函数。
</script>

-------------------------------------------------------
HTML CODE:

        <tr> 
          <th align="left">PSAM录入方式：</th>
         	<td> <input id="arecord" name="psam" type="radio" value="1" checked onclick="checks()"/>单条录入
         	<input id="records"  name="psam" type="radio" value="2"  onclick="checks()">批量录入</td>
        </tr>

    <tr>
      <th align="left">PSAM卡号：</th>
      <td><input name="psamcode" type="text" id="psamcode" size="30" maxlength="21" />
      	<input name="psamcodeend" type="text" id="psamcodeend" size="30" maxlength="21" />
      	<input type="hidden" name="psammodel" id="hidone">
      </td>
    </tr>