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

Question

前提・実現したいこと

プログラミング初心者です。
HTML内のテーブルに設置したラジオボタンが選択されたときに、選択されたラジオボタンと同じ行にあるtdの値を取得するやり方がわかりません。
やりたいことは、JavaScriptにてラジオボタンを選択しボタンを押下後、選択された行と同じ行にある値を取得し、その内容によってエラーメッセージの表示・非表示を行いたいです。

＜追記＞
下記コードにて具体例を説明させていただきます。
htmlで作成したテーブルの３番目、もものラジオボタンを選択後に「発送取り消しボタン」を押下した場合、ももはすでに「取り消し済み」になっているため、初期段階では非表示にしている「【発送中】を選択してください。」というエラーメッセージを表示したいです。
そのため、Javascriptにてラジオボタンで選択された行の「発送状況」の値を取得し、該当のif文内に「発送状況が「取り消し済み」だったら」という条件を記載したいです。

該当のソースコード

<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="発送取り消し" />

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にて値を取得してメッセージの表記をしたいです。

再度の掲載、また編集になり、ご迷惑をおかけし申し訳ございません。
また拙い文章と理解度での質問になってしまっていること、重ねてお詫び申し上げます。
お力添えをお願いします。

Answer 1

追記

面倒なので動作するコードをそのまま貼り付けます。

function MoveCheck() {
  //エラーメッセージを初期段階で未表示にする
  document.getElementById("selectradio").style.display = "none";
  document.getElementById("gonow").style.display = "none";
  var flag = 0;
  // チェックしたradioのNodeを入れておく変数（DOMをさかのぼって発送状況を取得する用途）
  let selectedRadioElement = null;
  //入力チェック
  if (document.form1.fruitRadio.length) {
    flag = 1;
    var i;
    for (i = 0; i < document.form1.fruitRadio.length; i++) {
      if (document.form1.fruitRadio[i].checked) {
        selectedRadioElement = document.form1.fruitRadio[i];
        flag = 0;
        break;
      }
    }
  } else {
    if (!document.form1.fruitRadio.checked) {
      flag = 1;
    }
  }

  if (flag) {
    //ラジオボタン未選択の場合の処理
    selectradio.style.display = ""; //「ラジオボタンを選択してください」を表示
    return false; // 送信を中止
  } else {
    let stockValue =
    selectedRadioElement //ラジオボタン
      .parentElement    //ラジオボタンが入っているtd
      .parentElement    //その行
      .children[3]      //その4要素目の子要素（発送状況列のtd）
      .textContent     //そのテキスト
    ;
    if (stockValue == 1) {
      gonow.style.display = ""; //「【発送済み】のものを選択してください」を表示
    } else {
      var checked = confirm("発送を取り消しますか？");
      if (checked == true) {
        alert("取り消しました");
        return true;
      } else {
        alert("キャンセルしました");
        return false;
      }
    }
  }
}

追記前に記載したDOMをさかのぼって地域のtextContetを取得した処理を適切な箇所に挿入しただけです。
「回答のコードをそのままjsファイルの先頭に記載した」と書かれていたので、それは大きな間違いであるという意味合いも込めてもうそのまま正解（であろうコード）を書きました。
（たとえ初心者であろうとも内容の理解もせずにコピペすることはエンジニアとして失格であることを自覚してください）
業務で作成されているコードと思われますが、公開して良いかどうかを勘案し秘匿すべき情報は隠すようコードを修正して質問文に記載したのはきちんとそのリスクを考えている、という意味ですばらしい行動ですが、そのために問題の本質がぶれたりなくなったりすると意味がありません。そのような状態では回答の内容をプログラムに組み込んでも期待した動作をしないので小出しに本来のコードの情報を書かざるを得なくなるでしょう。回答者としてはそれは非常に嫌悪感を抱く行為です。
機密情報の絡みでそのままコードを出せない、元のコードが非常に長くてそのまま記載できない場合は、「現象を再現できる小さなコード（ミニマムコードと言う）」と作って質問文に乗せるべきです。また、そのコードを作成している過程で問題の解決法を思いついたりすることも多いです。以後、質問する際はミニマムコードを作ってから質問するようにしてください。

そもそもは、まずこのような質問は会社の同僚やリーダーなどにする質問です。そのような人はいないのでしょうか。恥ずかしくて質問できない、自分の技量が劣っていることを知られたくないから質問できない、というのであればその考えは大きな間違いです。直ちに考えを改めるべきです。
質問は恥ではないし役に立つ

また、現状の質問者の技量はこの業務を行うにあたり著しくスキル不足と言わざるを得ません。業務時間外に書籍や学習サイト等を使って修行するようにしましょう。

なお、この回答に記載したコードはそのままコピペしても動作しないように細工がしてあります。
その細工を自分で発見し、使用してください。つまり細工に関しての質問は受け付けません。
（そもそもは元のコードで誤って使っている何かを正しているだけですが）

以前の回答

イベントリスナーでクリックされたラジオボタンはハンドルできますので、クリックされたラジオボタンのinput要素からparentElementやchildren使って目的の要素までたどっていけば良いです。

function radioSelected(e){
  let text = 
    this              //ラジオボタン
    .parentElement    //ラジオボタンが入っているtd
    .parentElement    //その行
    .children[3]      //その4要素目の子要素（地域列のtd）
    .textContent     //そのテキスト
  ;
  console.log(text);
}

// というクリックイベントをラジオボタンに仕掛ける
document.querySelectorAll('input[type=radio]')
  .forEach( e => e.addEventListener('click', radioSelected));

== と === について

MDNのドキュメントにしっかり説明されていますので一度熟読してください
https://developer.mozilla.org/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness

簡単に言うと、== は両側の式をいい具合に型変換してから比較します。
=== は型変換を行いません。

とても簡単な例えですが、 1 == "1" は true ですが 1 === "1" は false です。

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
とても分かりやすく理解することができました。
また、そのうえで教えていただいたコードをそのまま追加して構わないだろうと思い、そのままJavascriptの頭に付け加え、if文の該当箇所に（text == "北海道"）という条件を入れて試したのですが、思っていたような結果になりませんでした。（条件に関しましては熟読したうえで上記の条件であっているを思ったのですが、思うようにいかなかったので思いつく限りのパターンを試しました）

また後出しのような形になってしまって申し訳ございませんが、実際に活用しようとしているテーブルでは、配列で地域の部分に数字を利用しており、1なら関東、2なら関西、3なら北海道と表示するようにしています。
そのため、if文では北海道ではなく「３」を使うのかなとも思い、様々なパターンを試したのですが、やはりうまくいきませんでした。

コードを書き加える場所が間違っているのか、それとも等価演算子が間違っているのか、よければご教授をお願いしたいです。

[hope_mucci]

「思ったような結果にならない」という」説明文では何も相手に伝わりません。
「期待する結果」「実際の処理結果」を比較できるように説明してください。
そして、「実際の処理結果」を実行した時のコードを質問本文に書いてください。
最低限そのくらいの情報がないと、回答者にはあなたの環境でどのようなことが起こっているかがわかりません。
また、HTML側はthymreafのコードではなく、レンダリング後のHTMLを貼ってもらった方が回答者としては再現しやすいです。ブラウザでソースを見て、それをコピーして追記してください。

文字列もしくは数字の比較で躓いているのであれば、console.logでそれぞれ比較対象の変数を出力してみましょう。何が違うか分かります。検証ツールではブレークポイントを使ったデバッグもできます。Webエンジニアとして検証ツールを使いこなすことは必須です。検証ツールで変数をチェックしてみましょう。

[hope_mucci]

あと、先のコメントのような後出しは非常に嫌われます。
（回答が変わってしまう。もしくは全く当ての外れた回答になってしまう）
質問文に書かれたコードも現実に発生している問題とは別物もなのですね。
きちんと「あなたの抱えている問題が解決できる」質問文とコードを貼っていただかないと適切な回答ができませんし、問題を解決する回答も出てきません。

以上の点を留意し、「問題を解決するための質問文」に修正してください。
そうしていただかなければ的確な回答もアドバイスも不可能です。

[退会済みユーザー]

足りていない情報や後出しになってしまったこと、大変申し訳ございませんでした。
このようなサイトを利用することは初めてだったため、実際のコードを載せていいのかなど、質問方法にも悩んでいたため質問のご教授までしていただけたこと、とても有難いです。
ご指摘いただいた点や反省点から質問内容を書き換えさせていただきました。
もしご回答、アドバイスいただけるようでしたらお願いします。
ご不快な思いをさせてしまい申し訳ありませんでした。