欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS获取form中radio和buttons的选中值

程序员文章站 2022-03-06 09:45:14
...
在JS中获取到form表单的radiobuttons的选中值其实和普通的radiobutton的方法是一样的。常用的radiobutton会要求设定radiobutton的name属性和type属性,然后根据这两个属性进行查找,如下:
1 <br/>2         <input name="radio" type="radio" checked="checked" value="男"/>男3        
 <input name="radio" type="radio" value="女"/>女4        
  <br/><br/><br/>5         
  <label id="message">哈哈哈哈</label>

然后在JS中代码如下:

 1  <script type="text/javascript"> 2         
 $(function(){ 3            
  $("input[name='radio']").click(function()
  { 4                 if($(this).val() == "男")
  { 5                     $("#message").show(); 6                 }
  else{ 7                     $("#message").hide(); 
  8                 } 9             });
  10         })11     
  </script>

form表单中radiobuttons的基本设置如下:

1 <form:radiobuttons path="isall" items="${fns:getDictList('allType')}"2                                
itemLabel="label" itemValue="value"3                               
 htmlEscape="false" class="" onclick=""/>

这里没有显式的给出radio的name和type,要去渠道这两个属性只需要在网页上查看源代码,就可以得到它的属性,然后编写JS即可:

 1 $(function () { 2  3            
  $("input[name='isall']").click(function () 
  { 4                 if ($(this).val() == "0") 
  { 5                     $("#usermsg").hide(); 6                 
  } else { 7                     
  $("#usermsg").show(); 8                
   } 9             });
   10        
    });

我这里的操作是根据选中值的情况来显示或隐藏一部分页面,将需要显示或隐藏的部分的style设置为display:none即可,如:

 1  <p id="usermsg" class="control-group" style="display: none"> 2            
  <label class="control-label">用户账号:</label> 3  4            
   <p class="controls"> 5                 
   <input id="user_id" type="text" maxlength="100" name="userId" class="input-medium"/> 6                
    <shiro:hasPermission name="doctor:doctormsgpush:edit"> 7                     
    <input type="submit" value="查询用户ID" onclick="check()" 8                           
     class="btn btn-primary"/> 9                 </shiro:hasPermission>10            
      </p>11     
      </p>

相关推荐:

怎样让html的下拉菜单提交后保留选中值不返回默认值

Jquery如何获取radio选中值的示例详解

JS获取radio选中值实例代码

以上就是JS获取form中radio和buttons的选中值的详细内容,更多请关注其它相关文章!