JSFiddle - React, Tailwind, and code Playground

HTML

<form name="testForm">
  <label><input type="checkbox" name="cardPayment">カードで支払い</label>
  <div id="card-info" class="is-hidden">
    <p>カード表の12桁の数字を入力してください</p>
    <input type="text" name="cardNumber" placeholder="12桁の数字">
    <p>カード裏のPINコードを入力してください</p>
    <input type="text" name="cardPIN" placeholder="PINコード(3文字)">
  </div>
</form>

CSS

.is-hidden {
  display: none;
}

JavaScript

// 必要な要素を取得
const cardInfoContainer = document.querySelector('#card-info');
const testForm = document.testForm;
const cardPayment = document.testForm.cardPayment;
const cardNumber = document.testForm.cardNumber;
const cardPIN = document.testForm.cardPIN;

// チェックボックスのチェック状態が切り替わった時にイベント発火
cardPayment.addEventListener('change', toggleCardInfo, false);

// カード情報入力欄の有効化／無効化を切り替える関数
function toggleCardInfo(event) {
  // チェックが入っているかどうかの判定
	const isChecked = event.target.checked;
  
  // チェックが入ったら
  if (isChecked) {
  	cardInfoContainer.classList.remove('is-hidden'); // is-hiddenクラスを外す（表示させる）
    cardNumber.required = true; // カード番号入力欄を必須項目にする
    cardPIN.required = true; // PINコード入力欄を必須項目にする
  } else { // チェックがはずれたら
  	cardInfoContainer.classList.add('is-hidden'); // is-hiddenクラスをつける（非表示にする）
    cardNumber.required = false; // カード番号入力欄を任意にする
    cardPIN.required = false; // PINコード入力欄を任意にする
  }
}


/* document.getElementById("hidden1").style.display = "none";

function Checked() {
  var check = document.test_from.all.checked;
  for (var i = 0; i < document.test_from.test.length; i++) {
    document.test_from.test[i].checked = check;
  }
}

function myfunc() {
  var check1 = document.getElementById("Checkbox").checked;
  var hidden1 = document.getElementById("hidden1");

  if (check1 == true) {
    hidden1.style.display = "block";
  } else {
    hidden1.style.display = "none";
  }
}
 */