I'd like to get the check box value in JavaScript, so please tell me how to do it.

I would like to get the check box value in JavaScript as shown below, but if I get it with val(), it will turn on.

Also, I thought about how to get the value by .prop('checked'), but I want to determine if the first screen transition is checked. If you use .prop('checked'), the value will change by checking or removing it after displaying the screen.

I would like to get the value of whether or not the screen display is checked, but I would appreciate it if you could tell me how to do it.
I am not particular about .val() because it would be good to get the value.(Example: .text(), .prop())

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

javascript

2022-09-30 15:57

2 Answers

You may not be able to understand what the questioner wants to do, but if you want to use the current writing method to determine the check status of the check box,

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

I think so.

2022-09-30 15:57

Since we take the current DOM value, it is natural that the prop value changes depending on the timing of the processing, and val() returns HTMLInputElement.value, so it is natural that the result does not change depending on whether you select it.

I'm not sure what you want to do, but can't we just keep it in variables?

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

<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>

Or, if you haven't rewritten the DOM dynamically, you can do the same by getting the checked attribute, but I don't recommend it.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>label><input type="checkbox" id="check1">check1</label></div>;
<div>label><input type="checkbox" id="check2"checked>check2</label></div>;
<div>label><input type="checkbox" id="check3" checked='checked'>check3>/label></div>
<div>label><input type="checkbox" id="check4" checked='>check4</label></div>;

<button id='btn'>test</button>

So far, I've noticed that there's another way to do what's required.
checkbox has this check state in defaultChecked, so you can get the check status in the initial state without taking a detour.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>label><input type="checkbox" id="check1">check1</label></div>;
<div>label><input type="checkbox" id="check2"checked>check2</label></div>;
<div>label><input type="checkbox" id="check3" checked='checked'>check3>/label></div>
<div>label><input type="checkbox" id="check4" checked='>check4</label></div>;

<button id='btn'>test</button>

^{If you are rendering dynamically, such as React, these may not work well.}

2022-09-30 15:57

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656