Ռադիոկոճակների հետ աշխատանքը JavaScript-ում

Եկեք հիմա աշխատենք ռադիոկոճակների հետ: Դրանք փոխանջատիչների մի խումբ են, որից կարող է ընտրվել միայն մեկը: Որպեսզի մի քանի ռադիոկոճակներ լինեն խումբ, դրանք պետք է ունենան նույն name ատրիբուտի արժեքը:

html<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

Իսկ JavaScript-ում տարբերելու համար, թե որ կոճակն է ընտրվել, յուրաքանչյուր ռադիոկոճակի խմբում ավելացնում են value ատրիբուտներ տարբեր արժեքներով.

html<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Որպեսզի ինչ-որ ռադիոկոճակ լռելյայն նշված լինի, դրան անհրաժեշտ է տալ checked ատրիբուտը.

html<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Եկեք գործնականում տեսնենք, թե ինչպես աշխատել նման կոճակների հետ JavaScript-ում: Ենթադրենք՝ մենք ունենք վերևում ներկայացված ռադիոկոճակների խումբ, իսկ նաև սովորական կոճակ.

html<input type="submit" id="button">

Եկեք անենք այնպես, որ կոճակի վրա սեղմելիս էկրանին ցուցադրվի value այն ռադիոկոճակի, որն ընտրված է տվյալ պահին:

Խնդիրը լուծելու համար անհրաժեշտ է բոլոր ռադիոկոճակները անցնել ցիկլով և որոշել, թե որն է ընտրված: Դրա համար անհրաժեշտ է կարդալ յուրաքանչյուր ռադիոկոճակի checked հատկության արժեքը: Որի համար այս հատկությունը հավասար է true-ի - այդ ռադիոկոճակն է ընտրված:

Իրականացնենք նկարագրվածը.

javascriptlet radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
  for (let radio of radios) {
    if (radio.checked) {
      console.log(radio.value);
    }
  }
});