Question

我正在开发一个网页，其中每个标签中有4个标签和组件相同。让我说我的1.jsp文件是：

 <div id="studentData" class="student">
   Some elements like Name,Age,Standard
   <div class="textDiv">
     <input type="radio" name="gender" id="genderSelection" class="check" value="F"/>
     <input type="radio" name="gender" id="genderSelection" class="check" value="M"/>
   </div>
 </div>

在另一个JSP文件中：（2.jsp）

 <div id="firstTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>
 <div id="secondTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>
 <div id="thirdTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>
 <div id="fourthTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>

我面临的问题是：我在js中访问这些元素：（＃firstTabComponents #componentId）。无论何时我在一个选项卡中选择单选按钮，它都会在其他选项卡中取消选中。

如果需要进一步的详细信息，请与我们联系。

Answer 1

问题是所有单选按钮都具有相同的名称。由于它们的性质，只要选择了一个单选按钮，所有剩余的具有相同名称的单选按钮就会被取消选中。

答案取决于您提交表单的方式。

单独提交每个标签数据：

这假设您在每个标签中都有一个提交按钮。

 <div id="firstTabComponents">
    <form id="form1" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>
 <div id="secondTabComponents">
    <form id="form2" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>
 <div id="thirdTabComponents">
    <form id="form3" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>
 <div id="fourthTabComponents">
    <form id="form4" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>

完全提交所有标签的数据：

有两种选择。

您需要将1.jsp克隆到4个不同的文件中，并为所有控件使用不同的名称。
使用上面“分别提交每个标签数据”中显示的结构。使用JavaScript收集每个表单的数据，准备一个数据集（作为JSON格式的字符串或查询字符串）并使用单独的表单或Ajax提交。

以下是演示选项＃2的代码段。它序列化每个表单并向所有元素名称添加唯一前缀（form1_，form2_等）。所有表单数据字符串都是组合在一起的，可以使用$.get()或$.post()或$.ajax()方法之一发送到服务器。

// Gets form data string where all element names have prefix prepended
function getFormStrWithPrefix($el, prefix){
    var str = $el.serialize();
    str = ((str !== "") ? prefix : "" )+  str.replace("&", "&" + prefix);
    return str;
}

$('#btn-submit').on('click', function(e){
   var str = 
       getFormStrWithPrefix($('#form1'), 'form1_')
       + '&' + getFormStrWithPrefix($('#form2'), 'form2_')
       + '&' + getFormStrWithPrefix($('#form3'), 'form3_');

    // For testing purposes only
    $('#console').val(str);
    
   //$.post('server.php', str)
});

#console {
    width:100%;
    height:5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
    <fieldset><legend>Form 1</legend>
    Gender<br/>
    <label><input type="radio" name="gender" value="M"/> Male</label><br/>
    <label><input type="radio" name="gender" value="F"/> Female</label>
    </fieldset>
</form>
<form id="form2">
    <fieldset><legend>Form 2</legend>
    Gender<br/>
    <label><input type="radio" name="gender" value="M"/> Male</label><br/>
    <label><input type="radio" name="gender" value="F"/> Female</label>
    </fieldset>
</form>
<form id="form3">
    <fieldset><legend>Form 3</legend>
    Gender<br/>
    <label><input type="radio" name="gender" value="M"/> Male</label><br/>
    <label><input type="radio" name="gender" value="F"/> Female</label>
    </fieldset>
</form>

<form id="submit">
    Query that will be sent to the server:<br/>
    <textarea id="console"></textarea><br/>
    <p>
    <button id="btn-submit" type="button">Submit</button>
    </p>
</form>

Answer 2

我可以通过使用js更改name属性来解决此问题。

jQuery("#secondTabComponents .check").attr("name","gender2");

在一个选项卡中选择的单选按钮在其他选项卡中取消选中

2 个答案: