checkboxでチェックマークを１つだけ表示させたい

Question

前提・実現したいこと

１つのcheckboxをクリックして、他のcheckboxをクリックする際に、
１回目のチェックマークは消えて、２回目にクリックしたchecknoxだけにクリックマークを表示させたいです。

ですが現状全てのcheckboxにチェックマークをつけることができます。

該当のソースコード

現在mapを使ってcheckboxを表示させています

{ this.props.tasks.map((task, key) => {
　　return(
　　　　<div className={checkbox"} key={key}>
　　　　　　<label>
　　　　　　　　<input
                type="checkbox"
                onClick={(event) => {
                  this.setState({ taskid: task.id })}}
                />
              <span className="content">{task.name}</span>
            </label>
          </div>
        )
 })}

何かアドバイスありましたら幸いです。

よろしくお願いいたします。

Comments

[kszk311]

ラジオボタンではダメなのですか？

[gnx_vw903]

ラジオボタンでも大丈夫です。ただ、ラジオボタンでもクリックしたら全部にチェックマークがついてしまいます。`map`との併用は無理なんですかね、、、

[退会済みユーザー]

ラジオボタンの場合は、グループ化する意味で共通の name 属性が必要です

[gnx_vw903]

なるほど！ありがとうございます！
共通の名前をセットして`id={task.id}`でidを変えたら実装することができました。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[gnx_vw903]

見逃していました。ありがとうございます。

Answer 1

document.addEventListener('click',({target:t})=>'checkbox'==t.type?[...t.form[t.name]].map(e=>e==t?0:e.checked=!1):0,!1);

これより短くは書けまい。

Comments

[gnx_vw903]

回答ありがとうございます！

Answer 2

ご指摘いただいたように
nameを共通化して、idを{task.id}にしてそれぞれに違う値を与えれば実装できました。

{ this.props.tasks.map((task, key) => {
  return(
    <input
      type="radio"
      name="radiobutton"
      id={task.id}
      onClick={(event) => {
      this.setState({ taskid: task.id })}}
    />
  )
}