javascript - 在一个选项卡中选中的单选按钮在其他选项卡中未选中

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. 您需要将 1.jsp 克隆到 4 个不同的文件中，并为所有控件使用不同的名称。

2. 使用上面“分别提交每个标签数据”中所示的结构。使用 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>