输入类型如果在新窗口中打开,则检查无线电不起作用

时间:2017-04-05 16:06:08

标签: javascript html radio-button window.open

我的计划是点击link.html页面中的按钮(exp:检查radio.html中的选项2), 它将转到radio.html页面并检查选项2无线电。
我可以点击radio.html页面上的按钮查看收音机。
但是如果点击link.html上的按钮,打开radio.html页面时我无法检查收音机。
我得到一个想法是使用windows.open打开radio.html,然后使用window.onload& document.getElementById检查收音机。
但是失败了。我的想法错了吗?
请帮忙,TQVM。

这是radio.html代码:

<html>
<body>
<input type="radio" name="option"  id="opt1">		
<label for="opt1">Option 1</label>	
<input type="radio" name="option"  id="opt2">    				
<label for="opt1">Option 2</label>
<input type="radio" name="option"  id="opt3">    				
<label for="opt1">Option 3</label>
<input type="radio" name="option"  id="opt4">    				
<label for="opt1">Option 4</label>
<br>
<br>
<button onclick="check1()">Check Option 1</button>
<br>
<button onclick="check2()">Check Option 2</button>
<br>
<button onclick="check3()">Check Option 3</button>
<br>
<button onclick="check4()">Check Option 4</button>
<br>

<script>
function check1() {
    document.getElementById("opt1").checked = true;
}
function check2() {
    document.getElementById("opt2").checked = true;
}
function check3() {
    document.getElementById("opt3").checked = true;
}
function check4() {
    document.getElementById("opt4").checked = true;
}
</script>
</body>
</html>


这是link.html代码:

<html>
<body>
<button onclick="opencheck2()">Check Option 2 in radio.html</button>
<br>
<button onclick="opencheck3()">Check Option 3 in radio.html</button>
<br>

<script>
function opencheck2() {
	var mywindow = window.open("radio.html","_self");
	mywindow.onload = function(){
		document.getElementById("opt2").checked = true;			
	}
}
function opencheck3() {
	var mywindow = window.open("radio.html","_self");
	mywindow.onload = function(){
		document.getElementById("opt3").checked = true;			
	}
}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

执行此操作的最简单方法似乎是向正在打开的窗口添加事件侦听器,以便在加载时可以触发代码。这是一个示例,它将打开当前的SO页面并用单词test替换内容(您必须从控制台运行此代码片段似乎无法打开新窗口):

var mywindow = window.open(document.URL);
mywindow.addEventListener('load', function() {
  mywindow.document.getElementById('content').innerText = 'TEST';
});

这是您的代码的修改版本,它利用了相同的行为。我还将其缩减为一个功能,其中按钮现在传递一个数字,代表要勾选的复选框,而不是具有多个功能:

<html>
<body>
<button onclick="opencheck(2)">Check Option 2 in radio.html</button>
<br>
<button onclick="opencheck(3)">Check Option 3 in radio.html</button>
<br>

<script>
function opencheck(num) {
  var mywindow = window.open("radio.html");
  mywindow.addEventListener('load', function() {
    mywindow.document.getElementById("opt" + num).checked = true;           
  }
}
</script>
</body>
</html>