例えば複数人で泊まるホテルを予約する時、宿泊者の情報を入力する際に2人目以降の住所記入欄に「代表者と同じ」みたいなチェックボックスがあったりしますよね。でチェック入れたら1人目のフォームに入れてる住所が勝手に入力されるみたいな。それやります。

仕様

「代表者（1人目）と同じ情報を入力する」というチェックボタンを入れると2人目の入力フォームに1人目のフォームの値がコピペされる。
その後2人目のフォームを編集した場合チェックボックスのチェックが外れる

実装

以下のようなHTMLファイルでフォームを作成していることを想定します。

<!-- フォーム例 -->

<!-- 1人目 -->
<div class="first">
    <input type="text" id="name1" required>
    <input type="text" id="address1" required>
</div>

<!-- 2人目 -->
<!-- チェックボックス  -->
<input id="is_same_as_1" type="checkbox" /><label for="is_same_as_1">代表者（1人目）と同じ情報を入力</label>

<div class="second">
    <input type="text" id="name2">
    <input type="text" id="address2">
</div>

私が実際に実装したのはDjangoのHTMLで、フォームはinputタグではなく別のファイルで定義したものを引用する形でした。
その場合は、divタグで囲うなどでもして無理やりidを与えるか、生成されたフォームを直接右クリック→「検証」を押して自動生成されたidを調べるだけでも大丈夫です。

JavaScript でフォームの自動入力

htmlファイルのbodyタグの最後にscriptタグで以下のコードを書きます。

<body>

...

<script>
  $(function () {
    // チェックボックスを指定
    let is_same_as_1 = document.getElementById('is_same_as_1');

    // チェックを入れたときコピペを実行
    $('#is_same_as_1').click(function(){
      let name1 = $('#name1').val();
      let address1 = $('#address1').val();
      if (is_same_as_1.checked == true){    
        $("#name2").val(name1);
        $("#address2").val(address1);  
      }
    });

    // 2人目のフォームを編集したときチェックを外す
    $('#name2').change(function() {
      $("#is_same_as_1").prop("checked", false);
    });
    $('#address2').change(function() {
      $("#is_same_as_1").prop("checked", false);
    });
  });
</script>

</body>

終わり