checkboxにチェックしたかによって、checkboxのvalueを都度変更したい

Question

初期状態

初期状態は、コントローラーでtrue,falseいずれかの値を入れておき、
それがtrueであれば、checkboxにcheckがついた状態、
falseであればcheckが外れた状態を作っています。

@flag = true

%label.check
　= check_box_tag :flag, @flag, false, {class: 'click'}
---------------------------------------------------------
更新ボタン

※checkboxを押すたびにcheckがつく、外れるの実装はできています

実現したいこと

更新ボタンを押した際に、コントローラー側にflagの値を渡したいのですが、
初期値が「true」のときは、２へ飛ぶのですが、
初期値が「false」のときは、1できちんとfalseと出るのに2へ飛んでしまいます。

1でconsole.logしたときはfalseなのに、なぜ3に飛ばないのかがわかりません。
ご教授いただければ幸いです。

$('.click').on('click', () => {
　console.log(1)
  console.log($('.click').val())
  if ($('.click').val()) {
    console.log(2)
    $('.click').val(false)
  } else {
　　console.log(3)
    $('.click').val(true)
  }
})

Answer 1

回答

チェックボックスがチェックされているかどうかは、 .prop('checked') で判別してください。

const checked = $(this).prop('checked')

または

const checked = $('.click').prop('checked')

解説

.val() の戻り値は基本的に文字列です。

[HTML]
<p>c1: <input type="checkbox" value="123"   name="c1" id="c1"></p>
<p>c2: <input type="checkbox" value="true"  name="c2" id="c2"></p>
<p>c3: <input type="checkbox" value="false" name="c3" id="c3"></p>


[javascript]
const c1_val = $('#c1').val()
const c2_val = $('#c2').val()
const c3_val = $('#c3').val()
console.log(`c1: ${c1_val} / ${typeof c1_val}`)
console.log(`c2: ${c2_val} / ${typeof c2_val}`)
console.log(`c3: ${c3_val} / ${typeof c3_val}`)


[出力]
> c1: 123 / string
> c2: true / string
> c3: false / string

そして当然、文字列の "false" で判定すれば「真」の判定になってしまいます。

なので、チェック有無を boolean で取得したい場合は prop を使う必要があります。