Javascript: Parsing HTML #select #checkbox #radio

Select

 

HTML

<select id="receipt" name="receipt">
  <option value='one'>영수증 1</option>
  <option value='two'>영수증 2</option>
  <option value='three'>영수증 3</option>
</select>

 

Javascript

 

* id 값으로 가져오기

let receipt_type = document.querySelector('select#receipt option:checked').value;

 

* name 값으로 가져오기

let receipt_type = document.querySelector('select[name="receipt"] option:checked').value;

 

Radio

 

HTML

<input type="radio" name="payment" value="one">
<input type="radio" name="payment" value="two">

 

Javascript

let pay_method = document.querySelector('input[type="radio"][name="payment"]:checked').value;

 

Checkbox

 

HTML

<div>
  <input type="checkbox" name="work_type" value="Part_Time" >Part Time</label>
  <input type="checkbox" name="work_type" value="Full_Time" >Full Time</label>
</div>

 

Javascript

const checked_list = document.querySelectorAll("input[type='checkbox']:checked");