Javascriptでインクルードしたフォーム(HTMLファイル)とその中のJavascriptが上手く動かない件

前提・実現したいこと

現在HTML、Javascriptでフォームを作っており、
0. チェックボックスにチェックされたらJavascriptを用いて隠されたフォームを表示する。
またチェックボックスはCSSを用いて隠し、四角い枠にする。

各項目においてJavascriptを用いてリアルタイムにバリデーションチェックを行い、エラーがあれば赤字でその旨を表示する。
バリデーションを行う関数は各項目ごとに作られ、エラーを赤字で表示するとともにエラーがあればfalse、なければtrueを返す。
各関数の少なくとも1つがfalseを返せばチェックボックスの四角を赤くし、全てtrueなら緑を出力する。

ということをするつもりです。
可能であれば四角い枠は初期状態を白にして状況によって色を変えたいのですが
不可能なら最初から赤のままで問題ないです。
また、ディレクトリの構造は相対パスで
(ルートディレクトリ)/function
となります。

発生している問題・エラーメッセージ

バリデーションチェックの関数が動かず、色も一切変化しません。

該当のソースコード

javascript
1//include.js(隠されたフォームを表示する関数)
2function include(filename, afterfunc) {
3
4  include.seq = (include.seq)? include.seq + 1: 1;
5
6  var id = new Date().getTime() + "-" + include.seq;
7  var inc = document.createElement("iframe");
8
9  inc.id = "inc-" + id;
10  inc.src = filename;
11  inc.style.display = "none";
12  document.write("<span id=\"" + id + "\"></span>");
13    
14  var incfunc = function() {
15    
16    var s = (function() {
17      var suffix = (n = filename.lastIndexOf(".")) >= 0 ? filename.substring(n): "default";
18      if (suffix == ".html") return inc.contentWindow.document.body.innerHTML;
19      if (suffix == ".txt") return inc.contentWindow.document.body.firstChild.innerHTML;
20      if (suffix == "default") return inc.contentWindow.document.body.innerHTML;
21    })();
22
23    var span = document.getElementById(id);
24
25    var insertBeforeHTML = function(htmlStr, refNode) {
26      if (document.createRange) {
27        var range = document.createRange();
28        range.setStartBefore(refNode);
29        refNode.parentNode.insertBefore(range.createContextualFragment(htmlStr), refNode);
30      } else {
31        refNode.insertAdjacentHTML('BeforeBegin', htmlStr);
32      }
33    };
34
35    insertBeforeHTML(s.split("&gt;").join(">").split("&lt;").join("<"), span);
36    document.body.removeChild(inc);
37    span.parentNode.removeChild(span);
38    if (afterfunc) afterfunc();
39  };
40
41  if (window.attachEvent) {
42    window.attachEvent('onload', 
43      function() {
44        document.body.appendChild(inc); 
45        inc.onreadystatechange = function() { if (this.readyState == "complete") incfunc(); };
46      });
47  }
48  else {
49    document.body.appendChild(inc);
50    inc.onload = incfunc;
51  }
52}

HTML
1<!--インクルードされるフォームです-->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
8  <script type="text/javascript" src="validation-att.js"></script>
9<link rel="stylesheet" type="text/css">
10  <meta http-equiv="X-UA-Compatible" content="ie=edge">
11  <title>属性</title>
12</head>
13<body>
14<body><noscript>
15<p>大変申し訳ありませんがJavascriptをオンにして下さい。
16</p>
17</noscript>
18
19  <form action="" method="post" autocomplete="off" id="attribute">
20<fieldset><legend>あなたの情報</legend>
21  <script type="text/javascript">
22    valid_gender();
23  </script>
24  <input type="radio" name="gender_a" value="m" id="m"><label for="m">男性</label>
25  <input type="radio" name="gender_a" value="f" id="f"><label for="f">女性</label>
26  <input type="radio" name="gender_a" value="Q" id="Q"><label for="Q">その他</label>
27
28</p>
29<script type="text/javascript">
30  valid_attribute();
31</script>
32<p>
33   <div id="choice">
34
35  <input type="checkbox" name="attribute[]" value="0" id="0"><label for="0">A</label><br><br>
36  <input type="checkbox" name="attribute[]" value="1" id="1"><label for="1">B</label><br><br>
37<!-- 中略 -->
38  <input type="checkbox" name="attribute[]" value="22" id="22"><label for="22">X</label><br><br>
39
40</p>
41
42
43<br><br>
44  <script type="text/javascript">
45    valid_age10();
46  </script>
47  <script type="text/javascript">
48    valid_age1();
49  </script>
50<p>
51  <select name="age10_a">
52          <option selected></option>
53          <option value="0">0</option>
54          <option value="1">1</option>
55          <option value="2">2</option>
56          <option value="3">3</option>
57          <option value="4">4</option>
58          <option value="5">5</option>
59          <option value="6">6</option>
60          <option value="7">7</option>
61          <option value="8">8</option>
62          <option value="9">9</option>
63          <option value="10">10</option>
64        </select>
65  <select name="age1_a">
66          <option selected></option>
67          <option value="0">0</option>
68          <option value="1">1</option>
69          <option value="2">2</option>
70          <option value="3">3</option>
71          <option value="4">4</option>
72          <option value="5">5</option>
73          <option value="6">6</option>
74          <option value="7">7</option>
75          <option value="8">8</option>
76          <option value="9">9</option></select></p>
77
78          <p>鉄道が好きか</p>
79  <script type="text/javascript">
80    valid_fond();
81  </script>
82          <p>
83          <input type="radio" name="fond_a" value="0" id="F"><label for="F">非常に嫌い</label>
84          <input type="radio" name="fond_a" value="1" id="E"><label for="E">嫌い</label>
85          <input type="radio" name="fond_a" value="2" id="D"><label for="D">あまり好きではない</label><br>
86          <input type="radio" name="fond_a" value="3" id="C"><label for="C">まあ好き</label>
87          <input type="radio" name="fond_a" value="4" id="B"><label for="B">好き</label>
88          <input type="radio" name="fond_a" value="5" id="A"><label for="A">非常に好き</label></p>
89          </form>
90</body>
91
92</html>
93

Javascript
1//バリデーションチェックと色の変化を行うものです。
2var temp=document.forms.attribute
3ok=`
4</script>
5<style type="text/css">
6 .hidden_box label[class="survey"] {
7    
8    "background: #35A16B";
9}
10</style>
11<script type="text/javascript">
12`
13;
14ng=`
15</script>
16<style type="text/css">
17 .hidden_box label[class="survey"] {
18    
19    "background: #ff2800";
20}
21</style>
22<script type="text/javascript">
23`
24;
25function valid_gender(){
26	validation=true;
27	count=0;
28
29  for (var i =0; i < temp.gender_a.length; i++) {
30  		if (temp.gender_a[i].checked) {
31		count++;
32    }
33  }
34  if (count==0) {
35  	validation=false;
36  	document.write("<p style=\"color:#ff2800;\">1つ選択して下さい。</p>");
37  }
38	return validation;
39}
40
41function valid_attribute(){
42	validation=true;
43	count=0;
44
45  for (var i =0; i < temp.attribute[].length; i++) {
46  		if (temp.attribute[][i].checked) {
47		count++;
48    }
49  }
50  if (count==0) {
51  	validation=false;
52  	document.write("<p style=\"color:#ff2800;\">少なくとも1つ選択して下さい。</p>");
53
54  }
55	return validation;
56}
57
58function valid_age10(){
59	validation=true;
60	num=0;
61  for (var i =0; i < temp.age10_a.length; i++) {
62  	if (temp.age10_a[i].selected) {
63  		num=i;
64  		break;
65  	}
66  	if (i==temp.age10_a.length-1&&!temp.age10_a[i].selected) {
67  		validation=false;
68  		document.write("<p style=\"color:#ff2800;\">選択して下さい。</p>");
69  		break;
70  	}
71}
72  if (num==0) {
73  	validation=false;
74  	document.write("<p style=\"color:#ff2800;\">0から10の値を選択して下さい。</p>");
75  }
76	return validation;
77}
78
79function valid_age1(){
80	validation=true;
81	num=0;
82  for (var i =0; i < temp.age1_a.length; i++) {
83  	if (temp.age1_a[i].selected) {
84  		num=i;
85  		break;
86  	}
87  	if (i==temp.age1_a.length-1&&!temp.age1_a[i].selected) {
88  		validation=false;
89  		document.write("<p style=\"color:#ff2800;\">選択して下さい。</p>");
90  		break;
91  	}
92}
93  if (num==0) {
94  	validation=false;
95  	document.write("<p style=\"color:#ff2800;\">0から9の値を選択して下さい。</p>");
96  }
97	return validation;
98}
99
100function valid_fond(){
101	validation=true;
102	count=0;
103
104  for (var i =0; i < temp.fond_a.length; i++) {
105  		if (temp.fond_a[i].checked) {
106		count++;
107    }
108  }
109  if (count!=1) {
110  	validation=false;
111  	count==0　? document.write("<p style=\"color:#ff2800;\">1つ選択して下さい。</p>"):document.write("<p style=\"color:#ff2800;\">無効な回答です。</p>");
112  }
113	return validation;
114}
115function valid_att_all(){
116	validation=false;
117	if (valid_gender()==true&&valid_attribute()==true&&valid_age10()==true&&valid_age1()==true&&valid_fond()==true) {
118		validation=true;
119	}
120	return validation;
121}
122/*以下の関数は枠の色を変えるためのものです。*/
123function valid_color(){
124	valid_att_all()?document.write(ok):document.write(ng);
125}

PHP
1<!--大元のファイルです。ここで各フォームを表示し、実行します。-->
2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3<html lang="ja">
4
5<head>
6    <script type="text/javascript" src="jquery-3.2.0.min.js"></script>
7    <script type="text/javascript" src="include.js"></script>
8    <script type="text/javascript" src="function/validation-att.js"></script>
9    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10    <meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8">
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12    <title></title></head>
13
14
15<body><noscript>
16<p>大変申し訳ありませんがJavascriptをオンにして下さい。
17</p>
18</noscript>
19<!--ここから枠に関する仕様を設定する関数になります。-->
20<script type="text/javascript">
21    valid_color();
22</script>
23<style type="text/css">
24
25.hidden_box label[class="survey"] {
26    padding: 15px;
27    font-weight: bold;
28    border: solid 2px black;
29    cursor :pointer;
30}
31
32/*チェックは見えなくする*/
33.hidden_box input#label1 {
34    display: none;
35}
36
37/*中身を非表示にしておく*/
38.hidden_box .hidden_show {
39    height: 0;
40    padding: 0;
41    overflow: hidden;
42    opacity: 0;
43    transition: 0.8s;
44}
45
46/*クリックで中身表示*/
47.hidden_box  input[class="survey"]:checked ~ .hidden_show {
48    padding: 10px 0;
49    height: auto;
50    opacity: 1;
51}
52</style>
53<!--ここまで枠に関する仕様を設定する関数になります。-->
54<div class="hidden_box">
55    <label for="label1" class="survey">属性</label>
56    <input type="checkbox" id="label1" class="survey">
57    <div class="hidden_show">
58      <script type="text/javascript">
59          include("function/attribute.html");
60      </script>
61        
62
63    </div>
64</div>
65</body>
66
67</html>
68