常連

### **実現したいこと：「戻る」ボタンを押すことで、直前に選択したラジオボタンの選択状態を解除し、ひとつずつ過去の状態にさかのぼれる機能を実装したい！**

JavaScriptを独学し始めて1ヶ月ほどの超初心者ですm(_ _)m
現在、質問に回答するごとに正解の選択肢が絞られていく、**「アキネーター」**のようなプログラムを鋭意作成中です。

以下のスクリプトを活用し、「__ZeroPossibility__」クラスが付与された要素をCSSで非表示処理することによって、ユーザーが質問に答えるごとに正解となる選択肢が絞られていき、同時に尋ねる意義がなくなった質問も非表示になるプログラムが出来上がりました。

しかし、予期していなかった問題に気がつきました。それは、**「ユーザーが2個以上の選択を誤っていた場合に、一方をやり直すと結果が狂う」**ことです。

上記の回避策として、**「ひとつ前にいじったラジオボタンの選択状態を未選択状態に戻す」**ボタンの実装を思いついたのですが、どのようにコーディングすればよいのかわからずに困窮しております。

できれば、「一つ前に戻るボタン」を押す度に、何度でも直前にいじったラジオボタンの選択を解除できるようにしたいです。
なお、ユーザーが直前に、同じ質問の「はい」と「いいえ」を交互に切り替えていた場合は、「はい」や「いいえ」に戻す必要はないので、ただ選択を解除させたいです。

```HTML
<body>

    <div id="Questions"><h1>質問</h1>

        <div id="Q1">
            <p>Q. 動物ですか?</p>
            <label><input type="radio" name="RadGrpA1" id="A1Yes">YES</label>
            <label><input type="radio" name="RadGrpA1" id="A1No">No</label>
            <label><input type="radio" name="RadGrpA1">わからない</label>
        </div>

        <div id="Q2">
            <p>Q. 首が長いですか?</p>
            <label><input type="radio" name="RadGrpA2" id="A2Yes">YES</label>
            <label><input type="radio" name="RadGrpA2" id="A2No">No</label>
            <label><input type="radio" name="RadGrpA2">わからない</label>
        </div>

        <div id="Q3">
            <p>Q. 植物ですか?</p>
            <label><input type="radio" name="RadGrpA3" id="A3Yes">YES</label>
            <label><input type="radio" name="RadGrpA3" id="A3No">No</label>
            <label><input type="radio" name="RadGrpA3">わからない</label>
        </div>

        <div id="Q4">
            <p>Q. トゲがありますか?</p>
            <label><input type="radio" name="RadGrpA4" id="A4Yes">YES</label>
            <label><input type="radio" name="RadGrpA4" id="A4No">No</label>
            <label><input type="radio" name="RadGrpA4">わからない</label>
        </div>

        <div id="Q5">
            <p>Q. 人間ですか?</p>
            <label><input type="radio" name="RadGrpA5" id="A5Yes">YES</label>
            <label><input type="radio" name="RadGrpA5" id="A5No">No</label>
            <label><input type="radio" name="RadGrpA5">わからない</label>
        </div>

        <div id="Q6">
            <p>Q. ミュージシャンですか?</p>
            <label><input type="radio" name="RadGrpA6" id="A6Yes">YES</label>
            <label><input type="radio" name="RadGrpA6" id="A6No">No</label>
            <label><input type="radio" name="RadGrpA6">わからない</label>
        </div>

    </div>

    <h1>可能性</h1>
    <p id="Cabbage">キャベツ</p>
    <p id="Cactus">サボテン</p>
    <p id="Elephant">象</p>
    <p id="Giraffe">キリン</p>
    <p id="MichaelJackson">マイケルジャクソン</p>
    <p id="NobunagaOda">織田信長</p>

</body>
```

```JavaScript
document.getElementById("Questions").addEventListener("change", () => {

    let Judge = {Cabbage:"", Cactus:"", Elephant:"", Giraffe:"", MichaelJackson:"", NobunagaOda:""};
    let JudgeArray = ["Cabbage", "Cactus", "Elephant", "Giraffe", "MichaelJackson", "NobunagaOda"];

    const ResponseAndProcess = [
        {Response:"A1Yes", Omit:["Cabbage","Cactus"]},
        {Response:"A1No", Omit:["Elephant","Giraffe","MichaelJackson","NobunagaOda"]},
        {Response:"A2Yes", Omit:["Cabbage","Cactus","Elephant","MichaelJackson","NobunagaOda"]},
        {Response:"A2No", Omit:["Giraffe"]},
        {Response:"A3Yes", Omit:["Elephant","Giraffe","MichaelJackson","NobunagaOda"]},
        {Response:"A3No", Omit:["Cabbage","Cactus"]},
        {Response:"A4Yes", Omit:["Cabbage","Elephant","Giraffe","MichaelJackson","NobunagaOda"]},
        {Response:"A4No", Omit:["Cactus"]},
        {Response:"A5Yes", Omit:["Cabbage","Cactus","Elephant","Giraffe"]},
        {Response:"A5No", Omit:["MichaelJackson","NobunagaOda"]},
        {Response:"A6Yes", Omit:["Cabbage","Cactus","Elephant","Giraffe","NobunagaOda"]},
        {Response:"A6No", Omit:["MichaelJackson"]},
    ];

    for (let i=0; i<ResponseAndProcess.length; i++) {
        if (document.getElementById(ResponseAndProcess[i].Response).checked) {
            for (let j=0; j<ResponseAndProcess[i].Omit.length; j++) {
                Judge[ResponseAndProcess[i].Omit[j]] = "不正解";
            }
        }
    }

    for (let i = 0; i < JudgeArray.length; i++) {
        if (Judge[JudgeArray[i]] == "不正解") {
            document.getElementById(JudgeArray[i]).classList.add("ZeroPossibility");
        } else {
            document.getElementById(JudgeArray[i]).classList.remove("ZeroPossibility");
        }
    }

    document.querySelectorAll('#Questions > div').forEach(el => el.classList.remove("ZeroPossibility"))
    const Possibilities = Object.entries(Judge).flatMap(e => e[1] === "不正解" ? [] : e[0]);
    const ZeroPossibilityResponses = ResponseAndProcess.flatMap(e => Possibilities.every(x => !e.Omit.includes(x)) ? e.Response : [])
    ZeroPossibilityResponses.forEach(opt => {
        const $Options = document.getElementById(opt);
        if(!$Options.checked){
            $Options.closest('div').classList.add('ZeroPossibility')
        }
    });

});
```
負んぶに抱っこですみませんが、皆様のお知恵を拝借できれば幸いです。どうぞよろしくお願いいたしますm(_ _)m

【JavaScript】1回押す度に、直前に選択したラジオボタンのチェックを解除する「やり直し」ボタンを実装したい！

### 前提・実現したいこと

PHPファイルのみを使用して簡単なシステムを作っています。(詳細は割愛します。すみません)
ラジオボタンで選択した状態を送信ボタンを押下した後も保持する方法をお教えいただきたいです。

### 該当のソースコード
```PHP
<form action = "" method = "post">

  <input type="radio" name="example" value="1" checked>1
  <input type="radio" name="example" value="2">2
  <input type="radio" name="example" value="3">3
  <input type="radio" name="example" value="4">4<br>

  <input type = "submit" value = "送信">

</form>
```

情報追加しましたが、この他何か足りていない情報あればお教えください。

### 試したこと

調べてみましたが求めている情報は出てこず、ギブアップしてしまいました。

### 補足情報（FW/ツールのバージョンなど）

・ラジオボタンのデフォルトは1に設定しておかなければなりません。
現状だと2,3,4を選んでも送信ボタンを押下すると1に戻ってしまいます。

【PHP】ラジオボタンの選択状態を保持したい

ラジオボタン（製品カテゴリ）とチェックボックス（製品サイズ）にて製品を絞り込める一覧ページを構築しました。
ラジオボタン・チェックボックスによる絞り込み実装はなんとかできたのですが、遷移先ページにてブラウザの戻るボタンで一覧ページに戻った時の表示に関し、ブラウザごとに違いが出てしまいます。

Firefox：遷移直前の製品が絞り込まれた状態を表示（理想）
Chrome：各ボタンにチェックはされているが、表示されている製品が絞り込まれていない（全表示）状態が表示。
Edge：checked指定項目以外は何も選択されていない初期状態が表示

応急処置としてwindow.onpageshowを用い、ブラウザバック＝初期状態とさせて挙動を均一化させておりますが、理想としてはFirefox以外のブラウザも直前の選択状態を保持した状態で一覧ページに戻らせたいです。

色々と調べたところsessionStorageを上手く使えば実現できそうな気はしてるのですが、今回のケースに適したkeyやvalueの設定・記述方法がよく分からず、質問させていただいた次第です。

こちらの知識不足申し訳ございませんがご教示いただけますと幸いです。
何卒よろしくお願いいたします。


### 該当のソースコード

```html

<form>
  <div class="search-box category_search_box">
    <label>
      <input type="radio" name="category" value="" checked="checked" class="radio_input">
      <span class="radio_btn">全ての製品</span></label>
    <label>
      <input type="radio" name="category" value="ビジネス向け" class="radio_input">
      <span class="radio_btn">ビジネス向け</span></label>
    <label>
      <input type="radio" name="category" value="一般向け" class="radio_input">
      <span class="radio_btn">一般向け</span></label>
  </div>
  <div class="search-box size_search_box">
    <label>
      <input type="checkbox" name="size" value="15インチ" class="checkbox_input">
      <span class="checkbox_parts">15インチ</span></label>
    <label>
      <input type="checkbox" name="size" value="14インチ" class="checkbox_input">
      <span class="checkbox_parts">14インチ</span></label>
    <label>
      <input id="checkAll" type="checkbox" name="size" value="" class="checkbox_input">
      <span class="checkbox_parts">全サイズ選択</span></label>
  </div>
</form>

<div class="list">
  <ul class="list_item" data-category="ビジネス向け" data-size="15インチ">
    <li><a href="製品ページA"><img src="製品画像A.jpg" alt="製品A"></a></li>
    <li>
      <h2>製品A</h2>
    </li>
  </ul>
  <ul class="list_item" data-category="一般向け" data-size="15インチ">
    <li><a href="製品ページB"><img src="製品画像B.jpg" alt="製品B"></a></li>
    <li>
      <h2>製品B</h2>
    </li>
  </ul>
  <ul class="product_item list_item" data-category="ビジネス向け" data-size="14インチ">
    <li><a href="製品ページC"><img src="製品画像C.jpg" alt="製品C"></a></li>
    <li>
      <h2>製品C</h2>
    </li>
  </ul>
  <ul class="product_item list_item" data-category="一般向け" data-size="14インチ">
    <li><a href="製品ページD"><img src="製品画像D.jpg" alt="製品D"></a></li>
    <li>
      <h2>製品D</h2>
    </li>
  </ul>
</div>
```
```JavaScript
<script>
var searchBox = '.search-box';
var listItem = '.list_item';
var hideClass = 'is-hide';
var checkAll = '#checkAll';
var checkBox = 'input[name="size"]';

$(function() {
    $(document).on('change', searchBox + ' input', function() {
        search_filter();
    });
});
      
$( checkAll ).on('click', function() {
    $( checkBox ).prop('checked', $(this).is(':checked') );
  });

  $( checkBox ).on( 'click', function() {
    var boxCount = $( checkBox ).length;
    var checked  = $( checkBox + ':checked' ).length;
    if( checked === boxCount ) {
      $( checkAll ).prop( 'checked', true );
    } else {
      $( checkAll ).prop( 'checked', false );
    }
  });

function search_filter() {
    $(listItem).removeClass(hideClass);
    for (var i = 0; i < $(searchBox).length; i++) {
        var name = $(searchBox).eq(i).find('input').attr('name');
        var searchData = get_selected_input_items(name);
        if(searchData.length === 0 || searchData[0] === '') {
            continue;
        }
        for (var j = 0; j < $(listItem).length; j++) {
            var itemData = get_setting_values_in_item($(listItem).eq(j), name);
            var check = array_match_check(itemData, searchData);
            if(!check) {
                $(listItem).eq(j).addClass(hideClass);
            }
        }
    }
}

function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($(this).val());
    });
    return searchData;
}
function get_setting_values_in_item(target, data) {
    var itemData = target.data(data);
    if(!Array.isArray(itemData)) {
        itemData = [itemData];
    }
    return itemData;
}
function array_match_check(arr1, arr2) {
    var arrCheck = false;
    for (var i = 0; i < arr1.length; i++) {
        if(arr2.indexOf(arr1[i]) >= 0) {
            arrCheck = true;
            break;
        }
    }
    return arrCheck;
}
</script>
```
### 試したこと

取り急ぎ各ブラウザの挙動を統一したく、不本意ながらブラウザバック＝ページリフレッシュの対応中。
```JavaScript
<script>
      window.onpageshow = function(){
        document.getElementById("selectForm").reset();
      };
</script>
```

ブラウザバック時に、直前に入力したラジオボタン・チェックボックスの状態を表示させたい。

### 前提・実現したいこと
売上明細から商品を削除する機能を作っています。ラジオボタンを選択し、削除ボタンを押したら商品が削除されるイメージです。削除の動作は実現できましたが、初期状態では、売上明細リストにラジオボタンがどっちでも選択されない状態にしたいです。今の状況は、商品を登録後、ラジオボタンが1つついてしまいます。
![登録したらラジオボタンがついています](cfd764bba130f1075b10d1bbeb6b544c.png)


### 該当のソースコード

```ここに言語名を入力
**add.jsp**
		<span>売上明細</span>
		<table class="table" id="table">
			<tr>
				<th>削除</th>
				<th>商品ID</th>
				<th>商品名</th>
				<th>単価</th>
				<th>点数</th>
				<th>小計</th>
			</tr>

			<c:forEach items="${allList}" var="item" step="1" varStatus="status">
				<tr>
					<td><form:radiobutton path="delNumber"
							value="${status.index}" /></td>
					<td>${item.id }</td>
					<td>${item.name }</td>
					<td>${item.price }</td>
					<td>${item.quantity}</td>
					<td>${item.subtotal }</td>
				</tr>
			</c:forEach>
		</table>
		<span>合計： <c:out value="${total}" />円
		</span>

**Controller**
@RequestMapping(params = "remove")
	public String remove(SalesForm form, Model model, SessionStatus sessionStatus) {
		/**選択された商品が存在する場合、削除を行う*/
		if (form.getAllList().size() > 1) {
			/** RecordManagerにItemListを格納する*/
			model.addAttribute("ItemList", RecordManager.getItemList());
			model.addAttribute("nameList", RecordManager.makeNameList());
			model.addAttribute("allList", form.getAllList());
             //選択されたラジオボタンの行番号を受け取り、行を削除する。
			int count = form.getDelNumber();
			form.getAllList().remove(count);
			model.addAttribute("total", RecordManager.calTotal(form.getAllList()));
			model.addAttribute("message", "選択された明細行を削除しました。");
			return "add";
		} else {
			/**選択された商品がない場合、初期画面に戻る*/
			sessionStatus.setComplete();
			model.addAttribute("ItemList", RecordManager.getItemList());
			model.addAttribute("nameList", RecordManager.makeNameList());
			return "init";
		}
	}

**SalesForm**
public class SalesForm {
	private String goodsName;
	private String point;
	private int delNumber;

//ほかのgetter setterを省略
	public int getDelNumber() {
		return delNumber;
	}

	public void setDelNumber(int delNumber) {
		this.delNumber = delNumber;
	}
```

### 試したこと

[こちらの回答](https://teratail.com/questions/170857)を参考しましたが、解決方法わからかなったです。jspの書き方には問題なさそうですが、controllerでは何か足りないものってありますでしょうか？
ぜひ助言をお願いします。

ラジオボタンの初期値を未選択状態にしたい

スプレッドシートで、初期値TRUEの選択肢がありのラジオボタン作成方法を教えてください、という質問です。
google スプレッドシートにはラジオボタンはないので、チェックボックスを使って作成することになります。この機能を別に表現すると“デフォルトバリュー有＋排他処理付checkbox”です。
すいません、どなたかご存知の方教えて頂けますでしょうか。
＝＝＝例
最初にシートをロードすると以下のように4行2列で、”ALL”の横のcheckboxがオンになっているものを作成したいです。
checkboxの値を変えた場合ですが、このデフォルト状態から例えば2のチェックボックスをTRUEにしたら2のみがチェックオンになる、という挙動を目指しています（チェックオンは１つのみ、という排他処理付）

■ |ALL
❑|1
❑|2
❑|3

＝＝自分でどこまで調べたか
まず、排他処理付チェックボックスの方法は以下のサイトで紹介されていました。
”チェックボックスでなくて、ラジオボタンのような動作をさせたい”のところです。
ただ、ここはデフォルトオンの選択肢はありませんでした。

[リンク内容](https://creazy.net/2019/04/google-spreadsheet-checkbox.html#i-2)

初期値ありのcheckboxのサンプルがググれども見つかりませんでした。
皆さまのご協力を宜しくお願いします。m(__)m
↓↓↓↓teratailで排他処理もみつかりませんでした。
![イメージ説明](d3d5c3a87b4c10ed4ef8affccd21b6e3.png)

google スプレッドシート,初期値付ラジオボタンとしてのチェックボックス作成方法

### 前提・実現したいこと
プログラミング初心者です。
HTML内のテーブルに設置したラジオボタンが選択されたときに、選択されたラジオボタンと同じ行にあるtdの値を取得するやり方がわかりません。
やりたいことは、JavaScriptにてラジオボタンを選択しボタンを押下後、選択された行と同じ行にある値を取得し、その内容によってエラーメッセージの表示・非表示を行いたいです。

＜追記＞
下記コードにて具体例を説明させていただきます。
htmlで作成したテーブルの３番目、もものラジオボタンを選択後に「発送取り消しボタン」を押下した場合、ももはすでに「取り消し済み」になっているため、初期段階では非表示にしている「【発送中】を選択してください。」というエラーメッセージを表示したいです。
そのため、Javascriptにてラジオボタンで選択された行の「発送状況」の値を取得し、該当のif文内に「発送状況が「取り消し済み」だったら」という条件を記載したいです。

### 該当のソースコード

```HTML
<table>
			<tr>
				<th>ラジオボタン</th>
				<th>果物の名前</th>
				<th>値段</th>
				<th>発送状況</th>
			</tr>

			<tr th:each="fluit:${session.fluits}">
				<td><input type="radio" name="fluitRadio" th:value="${fluit.fluitId}"  /></td>
				<td th:text="${fluit.name)}"></td>
				<td th:text="${fluit.fee}"></td>
				<td th:text="${fluit.stock} == 1?[取り消し済み]:[発送中]"></td>
			</tr>
		</table>
		
　　　　　　　　　　　　　
			<div id="selectradio">ラジオボタンを選択してください。</div>
			
			<div id="gonow">【発送中】を選択してください。</div>

			<input onclick="return MoveCheck()" type="submit" name="reset"
				id="checkButton" value="発送取り消し" />
```
```Javascript
function MoveCheck() {
//エラーメッセージを初期段階で未表示にする
document.getElementById("selectradio").style.display ="none";
document.getElementById("gonow").style.display ="none";
var flag = 0;
//入力チェック
if (document.form1.fluitRadio.length) {
 flag = 1;
 var i;
 for (i = 0; i < document.form1.fluitRadio.length; i++) {
  if (document.form1.fluitRadio[i].checked) {
  flag = 0; break;
  }
 }
} else {
  if (!document.form1.fluitRadio.checked) {
  flag = 1;
  }
}

if (flag) {
//ラジオボタン未選択の場合の処理
 selectradio.style.display =""; //「ラジオボタンを選択してください」を表示
 return false; // 送信を中止
} else {
 if(”【ここに選択されたラジオボタンと同じ行にあるfluit.areaが「取り消し済み」だった場合を書きたいです】”){
 gonow.style.display ="";//「【発送済み】のものを選択してください」を表示
}else{
 var checked = confirm("発送を取り消しますか？");
 if (checked == true) {
  alert("取り消しました");
  return true;
 } else {
  alert("キャンセルしました");
  return false;
  }
 }
}
}
```

### Controllerとテーブルの中身
fluitという配列に、以下のように果物の情報が３つずつ入っていたとします。
（html内にて、発送状況が1なら取り消し済み、0なら発送中と表示）

Controllerでは選択された行の発送状況が0だった場合は1にする処理を書いています。
一方で発送状況が1だった場合は何も処理を行わないようにしています。

|ラジオボタン|果物の名前|値段|発送状況|
|:--|:--:|--:|
|ラジオボタン|りんご|100|0|
|ラジオボタン|ぶどう|120|0|
|ラジオボタン|もも|200|1|

### 期待する処理結果
・ラジオボタンを何も選択しなかった場合
→初期は非表示にしている「ラジオボタンを選択してください。」というメッセージを表示。処理はされない。

・ももの行のラジオボタンを選択後に発送取り消しボタンを押下した場合
→初期は非表示にしている「【発送中】を選択してください。」というメッセージを表示。処理はされない。

・リンゴの行のラジオボタンを選択後に発送取り消しボタンを押下した場合
→「発送を取り消しますか」というダイアログの後、その選択肢によって「取り消しました。」「キャンセルしました。」というダイアログを表示し、Controllerで処理を行う。処理後は「取り消し済み」という表記に変更。

### 実際の処理結果
・ラジオボタンを何も選択しなかった場合
→初期は非表示にしている「ラジオボタンを選択してください。」というメッセージを表示。

・ももの行のラジオボタンを選択後に発送取り消しボタンを押下した場合
→メッセージもダイアログも表示されず何も変化しない。

・リンゴの行のラジオボタンを選択後に発送取り消しボタンを押下した場合
→ダイアログがないままControllerに処理が送られ、「発送状況」の値が0から1に変更される。そのためビューでも「取り消し済み」という表記に変更。

おそらく、ラジオボタンの入力チェックはできていますが、選択された行の発送状況を区別できていないため、発送中でも取り消し済みでも処理が送られているようです。


### 以上を踏まえての質問内容
3つ目のラジオボタン(もも)を選択しボタンを押下したときに、選択された行の発送状況が「発送中」であるか「取り消し済み」であるかを取得し、if文にて「「取り消し済み」だった場合」という条件を書くにはどのようにしたらよいですか？
また、使用すif文に記載する条件は
if（　変数(選択された行の発送状況)　＝＝　１）｛
｝
となるのか、
if（　変数(選択された行の発送状況)　＝＝　"取り消し済み"）｛
｝
とすればよいのかも教えていただきたいです。

今回、Controllerでメッセージ表記する方法でもよいのですが、ダイアログを使用する処理もあるため、できればJavascriptにて値を取得してメッセージの表記をしたいです。

再度の掲載、また編集になり、ご迷惑をおかけし申し訳ございません。
また拙い文章と理解度での質問になってしまっていること、重ねてお詫び申し上げます。
お力添えをお願いします。

選択されたラジオボタンと同じ行にあるtdの値を取得するやり方がわかりません。

ラジオボタンを３つほど作り、最初のボタンにはcheckedを記入しています。
つまり最初から選択されている状態、のはずなのですが、
ブラウザを更新させると外れていたり、更新前にチェックした状態と変わっていなかったりします。
一番最初にHTMLをブラウザで開いたときはプログラム通りにチェックが入っているのですが。

症状はブラウザによって違います。

Microsoft Edge
Chrome
Firefox

これらのブラウザで試してみました。
HTMLをブラウザで開いて、適当にボタンをポチポチチェックします。
ブラウザを更新します。

Microsoft Edgeの場合、
チェックが全部外れてます。

Firefoxの場合、
更新前にチェックした状態のままです。

唯一まともだったのがChromeです。
更新するとちゃんと一番最初の状態（checkedは選択されている）に戻っていました。

質問ですが、
それぞれを更新させると、何故ブラウザよってチェック状態が違うのですか？
できれば全てChromeと同じ様に動作して欲しいところです。
それを実現させることができるソースコードをご存知でしたら教えてください。

…htmlをサーバーに上げると改善したりしますか？

```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<input type="radio" name="radio1" checked >ボタン１
		<input type="radio" name="radio1" >ボタン２
		<input type="radio" name="radio1" >ボタン３
		<br>
		<input type="radio" name="radio2" checked >ボタン１
		<input type="radio" name="radio2" >ボタン２
		<input type="radio" name="radio2" >ボタン３
	</body>
</html>

```

ブラウザの更新ボタンを押すとラジオボタンのチェック状態が異なる理由

### 前提・実現したいこと

以下のラジオボタン「昨日」の箇所を選択したいです。
XPathで要素指定しており、要素番号も取れているようなのですがなぜかクリックが行えません。

### 発生している問題・エラーメッセージ

```
ElementClickInterceptedException: Message: element click intercepted: Element <label>...</label> is not clickable at point (853, 509). Other element would receive the click: <div class="bnrMaKun--darkTooltip__bd">...</div>
  (Session info: chrome=86.0.4240.75)
```

### 該当のソースコード

```HTML
 <p class="term_radio pt10">
                    <label><input class="span_radio" name="span" value="span" checked="checked" type="radio" id="form_span" />上記期間</label><label><input class="span_radio" name="span" value="60d" type="radio" id="form_span" />60日</label><label><input class="span_radio" name="span" value="30d" type="radio" id="form_span" />30日</label><label><input class="span_radio" name="span" value="l2m" type="radio" id="form_span" />先々月</label><label><input class="span_radio" name="span" value="lm" type="radio" id="form_span" />先月</label><label><input class="span_radio" name="span" value="tm" type="radio" id="form_span" />今月</label><label><input class="span_radio" name="span" value="lw" type="radio" id="form_span" />先週</label><label><input class="span_radio" name="span" value="tw" type="radio" id="form_span" />今週</label><label><input class="span_radio" name="span" value="bytd" type="radio" id="form_span" />一昨日</label><label><input class="span_radio" name="span" value="ytd" type="radio" id="form_span" />昨日</label><label><input class="span_radio" name="span" value="td" type="radio" id="form_span" />今日</label>                </p>
```

```Python
time.sleep(5)
browser.find_element_by_xpath('//*[@id="report_form_4"]/div/table/tbody/tr[4]/td/p/label[9]').click()
```

### 試したこと

以下のアンサーを参考に変数に置いてJSで叩くことも試しましたが、やはり押せないようでした。

```Python
driver.execute_script("arguments[0].click();", elem)
```

[https://teratail.com/questions/64684](https://teratail.com/questions/64684)

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。