

JavaScriptで下記のようにチェックボックスの値を取得したいのですが、チェックが付いていてもいなくても `val()` で取得すると値が on
になってしまいます。

また、`.prop('checked')`
で値を取得する方法も考えたのですがやりたい処理としては最初の画面遷移時のチェックがついているかどうかで処理を判断したいため、`.prop('checked')`
を用いた場合は画面表示後にチェックを付けるまたは外すことで値が変わってしまいます。

あくまで画面表示時のチェックがついているかどうかの値を取得したいのですが、方法をご教授いただけると幸いです。  
値を取得できればよいので、`.val()` にこだわってはいません。(例: `.text()`, `.prop()`)

[code]

    let iniCheckStat = $(input[name='testDto.checkStat']").val();
    
[/code]


CC BY-SA 4.0
2020-08-26T12:26:33.390
69892
2020-08-26T17:52:37.553
2020-08-26T13:29:59.693
3060
41188
question
javascript
JavaScriptでチェックボックスの値を取得したいのですが、やりかたを教えて下さい


ちょっと質問者さんがやりたいことがちゃんと理解できていないかもしれませんが、現在の書き方でチェックボックスのチェック状態を判定したいのであれば

[code]

    let iniCheckStat = $(input[name='testDto.checkStat']:checked").val();
    
[/code]

だと思います。


CC BY-SA 4.0
2020-08-26T17:14:06.920
69897
2020-08-26T17:14:06.920
9515
69892
answer


現在のDOMの値を取るのですから処理のタイミングでpropの値が変わるのは当然ですし，`val()`は`HTMLInputElement.value`を返すものですので選択の有無によって結果が変わらないのも当然です．

なにをしたいのかはよくわかりませんが，単に変数などに保持しておくのではだめなのでしょうか．

[code]

    $(()=> {
      const initChecked = $('#target').prop('checked')
      
      $('#btn').on('click', ()=>console.log(`current: ${$('#target').prop('checked')}, init: ${initChecked}`))
    })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div><label><input type="checkbox" value="checked" id="target"> check</label></div>
    <button id="btn">check</button>
[/code]

あるいはDOMを動的に書き換えていないのであれば`checked`属性を取得することで同様のことは可能ですが，おすすめはしません．

[code]

    $('#btn').on('click', ()=> {
      $('input[type="checkbox"]').each((_i,e)=>console.log(`${e.id}: ${$(e).attr('checked')}`))
    })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div><label><input type="checkbox" id="check1"> check 1</label></div>
    <div><label><input type="checkbox" id="check2" checked> check 2</label></div>
    <div><label><input type="checkbox" id="check3" checked='checked'> check 3</label></div>
    <div><label><input type="checkbox" id="check4" checked=''> check 4</label></div>
    
    <button id='btn'>test</button>
[/code]

* * *

と，ここまで書いて気付いたのですが，求められているようなことをする方法がもう一つありました．  
`checkbox`は`defaultChecked`にこのチェック状態を持っているので，遠回りをせずとも初期状態でのチェック有無が取得できます．

[code]

    $('#btn').click(()=> {
      $('[type="checkbox"]').each((i, e)=> console.log(`${e.id}: ${$(e).prop('defaultChecked')}`))
    })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div><label><input type="checkbox" id="check1"> check 1</label></div>
    <div><label><input type="checkbox" id="check2" checked> check 2</label></div>
    <div><label><input type="checkbox" id="check3" checked='checked'> check 3</label></div>
    <div><label><input type="checkbox" id="check4" checked=''> check 4</label></div>
    
    <button id='btn'>test</button>
[/code]

* * *

なお，Reactなどで動的にレンダリングしている場合，これらはうまく機能しない可能性もあります．


CC BY-SA 4.0
2020-08-26T17:52:37.553
69898
2020-08-26T17:52:37.553
2376
69892
answer