ラジオボタン・チェックBOXの選択項目をクリアしたい

前提・実現したいこと

JavaScriptで処理後に選択項目をクリアしたい

###発生している問題
ラジオボタンとチェックBOXで処理が終わった後に選択をクリアしたいが
.checked = false;　が反映されない。

該当のソースコード

HTMLコード

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>


<body>

<style>
	#f{
		padding-top: 50px;
	}
</style>

	<div id="r">
		<input type="radio" name="juju" value="１を選択">１番
		<input type="radio" name="juju" value="２を選択">２番
		<input type="radio" name="juju" value="３を選択">３番
		
		<button id="z">クリック</button>
	</div>

<div id="f">
	<input type="checkbox" value="１です。">一
	<input type="checkbox" value="２です。">二
	<input type="checkbox" value="３です。">三

	<button id="x">クリック</button>
</div>


<script src="../javascripts/a.js"></script>

</body>
</html>

JavaScriptコード

document.getElementById('z').addEventListener('click',e=>{
    const colors = document.getElementsByName('juju');
    
    const selectedColor = [];
    colors.forEach(color => {
        if (color.checked === true) {
          selectedColor.push(color.value);
        }
      });

    const li = document.createElement('li');
    li.textContent = selectedColor;
    document.body.appendChild(li);

    colors.checked= false;
    selectedColor.checked = false;
})



document.getElementById('x').addEventListener('click', () => {
    const colors = document.querySelectorAll('input');
    
  const selectedColors = [];

    colors.forEach(color => {
      if (color.checked === true) {
        selectedColors.push(color.value);
      }
    });  
    
    const li = document.createElement('li');
    li.textContent = selectedColors;
    document.body.appendChild(li);

    colors.checked = false;
    selectedColors.checked = false;
  });

試したこと

ソースコードにも記載しましたがラジオボタン、チェックBOXそれぞれ
２つの要素に対して.checked = false;
を記載したがクリアされない。

行動規範の内容に同意します

回答2件

ベストアンサー

colors.checked= false;

colorsはDOM要素を直接参照していないのでcheckedプロパティを持っていません
ループして処理してください

javascript
1    colors.forEach(color => {
2      color.checked= false;
3    });

投稿2021/06/02 07:33

yambejp

総合スコア116724

shunta80

2021/06/02 08:16

ご回答ありがとうございます上記コードで選択肢のクリアができました。 colorsだけでは複数の要素が入ってるため、foreachで1つずつ分けてクリアの処理をするという認識で合っていますでしょうか？

yambejp

2021/06/02 08:35

イメージ的にはそんな感じで大丈夫です。ラジオボタンは同じnameのチェック箇所は、ひとつしか無いので (document.querySelector('[name=juju]:checked')||{}).checked=false; みたいな書き方でいけます

shunta80

2021/06/02 09:28

ご丁寧に説明いただきありがとうございます。

行動規範の内容に同意します

ここで、colors.checked = false;としている箇所で、colors変数に入っているのはチェックボックス（およびラジオボタン）の集合体です。
forEach文の中で、一つ一つのチェックボックス（ラジオボタン）に対して、color.checked = false;する必要があります。

投稿2021/06/02 07:30

編集2021/06/02 07:31