struts2 与 jquery 单选按钮事件问题答案

【问题标题】：struts2 with jquery radio button event issuestruts2 与 jquery 单选按钮事件问题
【发布时间】：2015-12-04 06:55:09
【问题描述】：

我在使用 jquery 处理单选按钮事件时遇到问题。我是 JQuery 的新手，但尝试使用 JQuery 处理 html 表单元素事件。最近几天，我将 JQuery datepicker 添加到我的表单中，它工作正常，现在尝试添加单选按钮并处理单选按钮的选中和未选中事件以隐藏和显示 html 元素的某些部分（文本字段、选择和其他元素）。

这是我的代码

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
 <%@ taglib prefix="tags" uri="/struts-tags"%>
 <html>
 <head>
      <link rel="stylesheet" href="jquery/jquery-ui.css">
 </head>
 <body>
 <tags:form name="someForm" action="someAction" method="post">
  <tags:textfield key="someActionClass.transactionDate" id="datepicker"     label="Transaction Date" />
  <tags:radio list="#{'1':'One Time','2':'Recurring'}" id="tType" lable="Transaction Type" name="recurringOrOneTime"></tags:radio>


  <div class="recuType">
    <h1>this part should be hiden/show depending upon radio button events</h1>
  </div>

  <script src="jquery/external/jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script>

  $( "#datepicker" ).datepicker({
    inline: true
   });

    $("#tType").change(function(){
    alert('Radio Button event raised');
    });

   </script>
   </tags:form>
  </body>
  </html>

我已经在 jquery 目录中添加了我为我的 JQuery datepicker 下载的 JQuery 库，正如您从这个链接标签中看到的那样

  <link rel="stylesheet" href="jquery/jquery-ui.css">

所以，当我单击单选按钮时，不会生成任何事件。出于测试目的，我尝试使用选定的单选按钮值弹出和警告消息，但没有运气。我浏览了很多帖子和示例，其中大多数都使用 html 输入标记，我想使用 struts2 标记元素。

我的代码有什么问题吗？还是错过了任何要包含的库？请帮忙

【问题讨论】：

标签： javascript jquery html struts2 radio-button

【解决方案1】：

用途：

$("input[name='recurringOrOneTime']").change(function(){
        alert('Radio Button event raised');
        });

代替

$("#tType").change(function(){
    alert('Radio Button event raised');
    });

id 在 html 文档中必须是唯一的，您为 2 个单选按钮分配了相同的 id。

【讨论】：

那么在我的情况下如何分配两个不同的 ID。由于我使用的是 struts2，我们应该提供一个单选按钮列表以及如何添加两个不同的 ID？
你有什么特别的理由给他们分配 id 吗？通常单选按钮只需要 name 属性来提交表单，也可能需要一个样式类。
现在我可以触发事件，但我的下一个要求是隐藏 html 元素，如 textbox 、 select 和其他放置在

这部分的元素应该根据单选按钮事件隐藏/显示

我可以隐藏纯文本，但是当涉及到文本字段或其他表单元素时，它不是。如何为他们执行隐藏和显示操作。请建议

【解决方案2】：

你可以改变两件事：

将属性id更改为class。
改为在类名上绑定事件。

改变

id="tType"

到

class="tType"

现在绑定事件：

$(".tType").change(function(){
    alert('Radio Button event raised');
});

或者你甚至可以通过input[type="radio"], :radio 等来引用它：

$("form input[type='radio']").change(function(){ // or $("form :radio")
    alert('Radio Button event raised');
});

【讨论】：

这部分的元素应该根据单选按钮事件隐藏/显示