material design component - mdc- radioButton

by jihoon kim

HTML

<head>
  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
</head>
<div class="mdc-form-field">
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" value="1" checked>
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
    <div class="mdc-radio__ripple"></div>
  </div>
  <label for="radio-1">내비</label>
  <div class="mdc-radio">
    <input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" value="2">
    <div class="mdc-radio__background">
      <div class="mdc-radio__outer-circle"></div>
      <div class="mdc-radio__inner-circle"></div>
    </div>
    <div class="mdc-radio__ripple"></div>
  </div>
  <label for="radio-2">검색</label>  
</div>

JavaScript

const formField = new mdc.formField.MDCFormField(document.querySelector('.mdc-form-field'));
const radio1 = new  mdc.radio.MDCRadio(document.querySelectorAll('[name="radios"]')[0].parentElement);
const radio2 = new  mdc.radio.MDCRadio(document.querySelectorAll('[name="radios"]')[1].parentElement);
alert( radio1.checked  + " / " + radio2.checked);
formField.input = [radio1,radio2];
formField.listen("click",function(e){
	this.querySelectorAll("[name='radios']")[0].checked;
  this.querySelectorAll("[name='radios']")[1].checked;  
	debugger;
})
debugger;