在另一个窗体上自动更改单选选项
Auto change radio selection on another form
我在一个网页中有两个表单,比如
<tr>
<td>
<h4>Team A[Form1]</h4>
<form name="form1" enctype="multipart/form-data">
<input type="radio" value="batting" name="teamA" /> Batting<br />
<input type="radio" value="bowling" name="teamA" /> Bowling<br />
</form>
</td>
<td>
<h4>Team B[Form2]</h4>
<form name="form2" enctype="multipart/form-data">
<input type="radio" value="batting" name="teamB" /> Batting<br />
<input type="radio" value="bowling" name="teamB" /> Bowling<br />
</form>
</td>
</tr>
以及如何在选择表格1时自动选择第二表格单选按钮。如果我在表格1中选择击球,则将表格2按钮更改为选择保龄球。
我正在努力做到像一样
<script type="text/javascript">
if(document.form1.teamA.checked = 'batting') {
document.form2.teamB.checked = 'bowling';
}
</script>
您可以使用data
属性来定义哪个字段应该"连接"到哪个按钮:
<form name="form1" id="form1" enctype="multipart/form-data">
<input type="radio" value="batting" data-toggle="bowling" name="teamA" />Batting
<br />
<input type="radio" value="bowling" data-toggle="batting" name="teamA" />Bowling
<br />
</form>
JS-
$('#form1 :radio').change(function () {
$('#form2 :radio').filter('.' + $(this).data('toggle')).prop('checked', true);
});
http://jsfiddle.net/hVkmM/
因此,如果有一天值发生变化或添加了新选项,javascript代码将继续工作。
或者像这样:
$('#form1 :radio').change(function () {
$('#form2 :radio[value="' + $(this).data('toggle') + '"]').prop('checked', true);
});
http://jsfiddle.net/hVkmM/1/
您甚至可以进行双向绑定,因此在第二种形式中检查单选按钮会更改第一种形式中的状态:
http://jsfiddle.net/hVkmM/2/
$('form[name="form1"] input[type=radio][name=teamA]').change(function(){
var radiosFrom2ndForm = $('form[name="form2"] input[type=radio][name=teamB]');
for(var i = 0; i < radiosFrom2ndForm.length; i++)
if(radiosFrom2ndForm[i].value !== this.value)
radiosFrom2ndForm[i].checked = true;
});
Fiddle
备选方案:
$('form[name="form1"] input[type=radio][name=teamA]').change(function(){
$('form[name="form2"] input[type=radio][name=teamB][value!=' + this.value + ']').prop('checked', true);
});
Fiddle
这应该比以前的版本工作得更好:
$(document).ready(function(){
$("#form1 input:radio[id='bowling']").prop("click",true);
$("#form1 input:radio").on("change",function(){
$("#form2 input:radio[id='bowling']").prop("checked", $("#batting").prop("checked"));
});
});
http://jsfiddle.net/rMYrj/2/
还对HTML进行了一些更改,以便您可以在选择器
使用以下代码
<script>
$(document).ready(function(){
$("input[name='teamA']").change(function(){
if($("input[name='teamA']:checked").val() == "batting")
{
$("input:radio[name='teamB'][value='bowling']").attr('checked', 'checked');
}
if($("input[name='teamA']:checked").val() == "bowling")
{
$("input:radio[name='teamB'][value='batting']").attr('checked', 'checked');
}
});
});
</script>
看看这个Fiddlehttp://jsfiddle.net/z8Lnd/5/
相关文章:
- JQuery覆盖不更改单选选项
- 如何根据所选选项值重定向表单操作
- 复选框/单选按钮-添加所选项目的总价
- 更新:仅根据单选按钮和所选选项选择特定项目
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- Angular:如何使用ngRepeat并设置默认单选按钮选项
- 是否可以使用后退按钮保留窗体单选选项
- 需要找到我的单选选项已检查值更改的位置
- 仅当选择了1/3+1/3单选选项时,才可单击按钮
- 取消选择单选选项
- 在Angularjs的Protractor test中选择单选选项
- HTML/PHP:基于一个单选选项传递多个值
- 如何使用单选选项提交表单
- 在另一个窗体上自动更改单选选项
- 单击单选选项时显示文本框
- 使用带有单选选项的按钮自动填充窗体
- 根据单选选项显示更多单选按钮
- 为什么IE8无法解析我的JQuery选择器以选中的单选选项
- 显示或隐藏基于单选选项的表单是或否选择
- 按下动态创建的按钮以显示隐藏的单选选项列表