どのようにチェックボックスと1つのボタンで4つの異なるHTMLサブページを呼び出すことができます

Question

どのHTMLサブページがロードされるべきかを選択するための4つのチェックボックスがあります。ボタンを押すとページが読み込まれます。チェックボックスは1つだけ選択する必要があります。誰か助けてくれますか？

function selectOnlyThis(id){ 
 
    var myCheckbox = document.getElementsByName("myCheckbox"); 
 
    Array.prototype.forEach.call(myCheckbox,function(el){ 
 
    \t el.checked = false; 
 
    }); 
 
    id.checked = true; 
 
} 
 

 
function check(){ \t 
 
    var id = document.getElementById("c1").checked; 
 
    //var id = document.getElementById("c2").checked; 
 
    //var id = document.getElementById("c3").checked; 
 
    //var id = document.getElementById("c4").checked; 
 
    alert(id); 
 
} 
 

 
document.getElementById("id").onclick = function() {check()}; 
 
    //open File.html

<input type="checkbox" id="c1" name="myCheckbox" value="1" onclick="selectOnlyThis(this)" /> 
 
<input type="checkbox" id="c2" name="myCheckbox" value="2" onclick="selectOnlyThis(this)"/> 
 
<input type="checkbox" id="c3" name="myCheckbox" value="3" onclick="selectOnlyThis(this)"/> 
 
<input type="checkbox" id="c4" name="myCheckbox" value="4" onclick="selectOnlyThis(this)"/> 
 

 
<button id="c1" onclick="check()">OpenHTML</button>

Answer 1

あなたは彼らが独自のオプション選択のために意図されている、 "ラジオ" コントロールを使用する必要があります。また、項目のチェックを外す/チェックする機能は必要ありません。ラジオボタンで自動的に機能します。

function check(){ \t 
 
    alert(document.forms['selection'].myCheckbox.value); 
 
} 
 

 
window.document.onload=function(){ 
 
document.getElementById("id").onclick = function() {check()}; 
 
    //open File.html 
 
    }

<form name=selection> 
 
<input type="radio" id="c1" name="myCheckbox" value="1" /> 
 
<input type="radio" id="c2" name="myCheckbox" value="2" /> 
 
<input type="radio" id="c3" name="myCheckbox" value="3" /> 
 
<input type="radio" id="c4" name="myCheckbox" value="4" /> 
 
</form> 
 
<button id="c1" onclick="check()">OpenHTML</button>

Answer 2

function check(){ \t 
 
    //alert(document.forms['action'].myCheckbox.value); 
 
     (document.forms['action'].myCheckbox.value); 
 
\t }

<form name=action> 
 
\t \t <input type="radio" id="c1" name="myCheckbox" onclick="window.location.href='http://google.com'"/> \t   \t 
 
\t \t <input type="radio" id="c2" name="myCheckbox" value="window.location.href='http://yahoo.com'"/> 
 
\t \t <input type="radio" id="c3" name="myCheckbox" value="3"/> \t \t 
 
\t \t <input type="radio" id="c4" name="myCheckbox" value="4"/> 
 
\t \t </form> 
 
    
 
<button onclick="check()">OpenHTML</button>

これが実行されている、感謝

function check(){ \t 
 
     window.open(document.forms['action'].myCheckbox.value); \t \t 
 
\t \t 
 
\t } \t

<form name=action> 
 
<input type="radio" id="c1" name="myCheckbox" value="http://google.com" onclick="myCheckbox(this.value)"/>  \t 
 
<input type="radio" id="c2" name="myCheckbox" value="http://yahoo.com" onclick="myCheckbox(this.value)"/> 
 
<form> 
 

 
<button onclick="check()">OpenHTML</button>