gpt4 book ai didi

jquery - 在检查另一个 radio 输入时更改一个 radio 输入

转载 作者:太空宇宙 更新时间:2023-11-04 06:01:30 26 4
gpt4 key购买 nike

我想使用一些 radio 输入创建一个表单。检查输入时,还会使用 jQuery 自动检查另一个 radio 。

例如:

问题1:A(勾选),B,Cquestion2: D(auto checked), E, F

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<tr>
<td>

<form name="form1" enctype="multipart/form-data">
<input type="radio" value="A" name="teamA" /> A<br />
<input type="radio" value="B" name="teamA" /> B<br />
<input type="radio" value="C" name="teamA" /> C<br />
<br /><br />
</td>
<td></td>
<input type="radio" value="D" name="teamB" /> D<br />
<input type="radio" value="E" name="teamB" /> E<br />
<input type="radio" value="F" name="teamB" /> F<br />
</form>
</td>
</tr>

</body>
</html>

最佳答案

这是 jQuery 的有效使用,可以完成您要求的工作(w/jQuery)。我还清理了一些 html:

  1. 你缺少开始和结束标签
  2. 我把表单标签放在表外面(作为父表),因为它以前在一个行单元格中开始并在另一个行单元格中结束是非标准的html
  3. 在输入周围添加了标签 - 这是预期的用户界面/标准最佳实践,当有人点击“A”时,就好像他们点击了一样单选按钮。

$(document).ready(function() {
//on any change in teamA
$("[name=teamA]").change(function() {

//get the index of clicked item (this) among set of teamA
//A is 0, B is 1, C is 2 within teamA,
//C is 0, D is 1, E is 2 within team B
//it's their order within the set
var clickedItemIndex=$(this).index("[name=teamA]");
$("[name=teamB]").eq(clickedItemIndex).prop("checked",true);

});
});
   
label { display: block } /* brs are a nuisance, display: block */
<!DOCTYPE html>
<html>

<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
<!--1. Another item you may have missed is that your code is missing <table> start and end blocks
2. I also took your form and put it OUTSIDE your table, it's not good form to start a form in one cell (a td block) and then end in another when you can just put the form as the parent to the table.
3. I added labels around inputs as that's standard best-practice, it means when somebody clicks the 'A' it's as if they clicked the radio, again - the expected standard UI of the web
-->
<form name="form1" enctype="multipart/form-data">
<table>
<tr>
<td>
<label><input type="radio" value="A" name="teamA" /> A</label>
<label><input type="radio" value="B" name="teamA" /> B</label>
<label><input type="radio" value="C" name="teamA" /> C</label>

</td>
<td>
<label><input type="radio" value="D" name="teamB" /> D</label>
<label><input type="radio" value="E" name="teamB" /> E</label>
<label><input type="radio" value="F" name="teamB" /> F</label>
</td>
</tr>
</table>
</form>
<script>
</script>
</body>

</html>

关于jquery - 在检查另一个 radio 输入时更改一个 radio 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57246897/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com