JavaScript ラジオボタンのチェックを付ける(外す)サンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
1.フォームのname「frmcity」とラジオボタンのname「city」で対象を特定します
const 変数名=document.frmcity.city;
2.ラジオボタンにチェックが入れます
変数名[ラジオボタンのインデックス].checked = true
3.ラジオボタンにチェックを外す
変数名[ラジオボタンのインデックス].checked = false
使用例
<!DOCTYPE html>
<html>
<body>
<p>選択した都市の名前 <span id="cft"></span></p>
<form name="frmcity">
<input type="radio" name="city" value="tokyo" /> 東京
<input type="radio" name="city" value="oosaka" /> 大阪
<input type="radio" name="city" value="fukuoka" /> 福岡
</form>
<p><input type="button" value="操作1" onclick="funA()" /></p>
<p><input type="button" value="操作2" onclick="funB()" /></p>
<script>
function funA() {
/*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
const city=document.frmcity.city;
/* ラジオボタンのname「city」で対象を特定*/
city[2].checked = true;
}
function funB(){
/*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
const city=document.frmcity.city;
/* 各項目に対してcheckedをfalseにしてチェックを外す*/
for( let i=0;i<city.length;i++){
city[i].checked = false;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>選択した都市の名前 <span id="cft"></span></p>
<form name="frmcity">
<input type="radio" name="city" value="tokyo" /> 東京
<input type="radio" name="city" value="oosaka" /> 大阪
<input type="radio" name="city" value="fukuoka" /> 福岡
</form>
<p><input type="button" value="操作1" onclick="funA()" /></p>
<p><input type="button" value="操作2" onclick="funB()" /></p>
<script>
function funA() {
/*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
const city=document.frmcity.city;
/* ラジオボタンのname「city」で対象を特定*/
city[2].checked = true;
}
function funB(){
/*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
const city=document.frmcity.city;
/* 各項目に対してcheckedをfalseにしてチェックを外す*/
for( let i=0;i<city.length;i++){
city[i].checked = false;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>選択した都市の名前 <span id="cft"></span></p>
<form name="frmcity">
<input type="radio" name="city" value="tokyo" /> 東京
<input type="radio" name="city" value="oosaka" /> 大阪
<input type="radio" name="city" value="fukuoka" /> 福岡
</form>
<p><input type="button" value="操作1" onclick="funA()" /></p>
<p><input type="button" value="操作2" onclick="funB()" /></p>
<script>
function funA() {
/*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
const city=document.frmcity.city;
/* ラジオボタンのname「city」で対象を特定*/
city[2].checked = true;
}
function funB(){
/*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
const city=document.frmcity.city;
/* 各項目に対してcheckedをfalseにしてチェックを外す*/
for( let i=0;i<city.length;i++){
city[i].checked = false;
}
}
</script>
</body>
</html>
実行結果
[操作1]ボタンを押すと、ラジオボタン「福岡」にチェックが入れます。
「操作2」ボタンを押すと、ラジオボタンのチェックが外れます。