webその?
checkbox
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毎日のルーティンチェックリスト</title>
</head>
<body>
<h1>毎日のルーティンチェックリスト</h1>
<ul>
<li><input type="checkbox" id="task1"> 朝のストレッチ</li>
<li><input type="checkbox" id="task2"> 朝食を食べる</li>
<li><input type="checkbox" id="task3"> メールをチェックする</li>
<!-- その他のタスクを追加 -->
</ul>
<button onclick="clearChecks()">チェックをクリア</button>
<script>
// ページが読み込まれたときに、localStorageから状態を読み込む
window.onload = function() {
for (let i = 1; i <= 3; i++) {
const task = document.getElementById(`task${i}`);
const isChecked = localStorage.getItem(`task${i}`) === "true";
task.checked = isChecked;
// チェックボックスの状態が変更されたときに、localStorageに保存
task.addEventListener('change', function() {
localStorage.setItem(`task${i}`, task.checked);
});
}
}
// チェックをクリアする関数
function clearChecks() {
for (let i = 1; i <= 3; i++) {
const task = document.getElementById(`task${i}`);
task.checked = false;
localStorage.setItem(`task${i}`, false);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毎日のルーティンチェックリスト</title>
</head>
<body>
<h1>毎日のルーティンチェックリスト</h1>
<h2>朝のルーティン</h2>
<ul>
<li><input type="checkbox" id="morning1">aa</li>
<li><input type="checkbox" id="morning2">aa</li>
<li><input type="checkbox" id="morning3">aa</li>
<li><input type="checkbox" id="morning4">aa</li>
<li><input type="checkbox" id="morning5">aa</li>
<li><input type="checkbox" id="morning6">aa</li>
<li><input type="checkbox" id="morning7">aa</li>
<li><input type="checkbox" id="morning8">aa</li>
</ul>
<button onclick="clearChecks('morning', 8)">朝のルーティンをクリア</button>
<h2>昼のルーティン</h2>
<ul>
<li><input type="checkbox" id="noon1" >aa</li><!-- 5つのアイテムをここに追加 -->
<li><input type="checkbox" id="noon2">aa</li><!-- 5つのアイテムをここに追加 -->
<li><input type="checkbox" id="noon3">aa</li><!-- 5つのアイテムをここに追加 -->
<li><input type="checkbox" id="noon4">aa</li><!-- 5つのアイテムをここに追加 -->
<li><input type="checkbox" id="noon5">aa</li><!-- 5つのアイテムをここに追加 --><!-- ここに昼のルーチンの5つのアイテムを追加 -->
</ul>
<button onclick="clearChecks('noon', 5)">昼のルーティンをクリア</button>
<h2>夜のルーティン</h2>
<ul>
<li><input type="checkbox" id="night1">aa</li>
<li><input type="checkbox" id="night2">aa</li>
<li><input type="checkbox" id="night3">aa</li>
<li><input type="checkbox" id="night4">aa</li><!-- ここに夜のルーチンの4つのアイテムを追加 -->
</ul>
<button onclick="clearChecks('night', 4)">夜のルーティンをクリア</button>
<script>
const routines = {
morning: 8,
noon: 5,
night: 4
};
// ページが読み込まれたときに、localStorageから状態を読み込む
window.onload = function() {
for (const [prefix, count] of Object.entries(routines)) {
for (let i = 1; i <= count; i++) {
const task = document.getElementById(`${prefix}${i}`);
const isChecked = localStorage.getItem(`${prefix}${i}`) === "true";
task.checked = isChecked;
// チェックボックスの状態が変更されたときに、localStorageに保存
task.addEventListener('change', function() {
localStorage.setItem(`${prefix}${i}`, task.checked);
});
}
}
}
// チェックをクリアする関数
function clearChecks(prefix, count) {
for (let i = 1; i <= count; i++) {
const task = document.getElementById(`${prefix}${i}`);
task.checked = false;
localStorage.setItem(`${prefix}${i}`, false);
}
}
</script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
// ここにDOMが読み込まれた後の処理を記述
});
<p>質問1: あなたは猫が好きですか？</p>
<label><input type="checkbox" id="yesCheckbox"> はい</label>
<label><input type="checkbox" id="noCheckbox"> いいえ</label>
<label><input type="checkbox" id="bothCheckbox"> 両方</label>
<div id="yesContent" style="display: none;">
猫が好きなのですね！
</div>
<div id="noContent" style="display: none;">
猫はあまり好みではないのですね。
</div>
<div id="nextQuestion" style="display: none;">
<p>質問2: あなたは犬が好きですか？</p>
<!-- ここに次の質問に関する内容やチェックボックスを配置 -->
</div>
<script>
document.getElementById('yesCheckbox').addEventListener('change', updateContentDisplay);
document.getElementById('noCheckbox').addEventListener('change', updateContentDisplay);
document.getElementById('bothCheckbox').addEventListener('change', updateContentDisplay);
function updateContentDisplay() {
var yesContent = document.getElementById('yesContent');
var noContent = document.getElementById('noContent');
var yesChecked = document.getElementById('yesCheckbox').checked;
var noChecked = document.getElementById('noCheckbox').checked;
var bothChecked = document.getElementById('bothCheckbox').checked;
// 両方がチェックされた場合
if (bothChecked) {
yesContent.style.display = 'block';
noContent.style.display = 'block';
return;
}
// それ以外の場合
yesContent.style.display = yesChecked ? 'block' : 'none';
noContent.style.display = noChecked ? 'block' : 'none';
}
</script>選択
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Search Array</title>
<link href="marge3.css" rel="stylesheet"/>
<script src="river_japan.js"></script>
<script src="prefectureData.js"></script>
</head>
<body>
<div class="input_area">
<div>
<input checked="" id="searchByRiver" name="searchType" type="checkbox" value="river"/>
<label for="searchByRiver">河川名</label>
<input id="searchByLength" name="searchType" type="checkbox" value="length"/>
<label for="searchByLength">長さ</label>
</div>
<div>
<input id="searchInput" onkeyup="showSuggestions()" placeholder="Enter value from 2nd column" type="text"/>
<span id="matchCount"> 件マッチ</span> <!-- これが追加される部分 -->
</div>
<select id="suggestions" onchange="showMatchingRows()">
<!-- 候補がここに動的に追加されます -->
</select>
</div>
<table border="1" id="resultTable1">
<tr>
<th>通番</th>
<th>河川名</th>
<th>所属県名</th>
<th>長さ</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table border="1" id="resultTable3">
<tr>
<th>通番</th>
<td></td>
</tr>
<tr>
<th>都道府県</th>
<td></td>
</tr>
<tr>
<th>県庁所在地</th>
<td></td>
</tr>
<tr>
<th>人口</th>
<td></td>
</tr>
<tr>
<th>特産品1</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>観光名所1</th>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
function getCell(table, rowIndex, colIndex) {
const rows = table.getElementsByTagName('tr');
if (rows.length <= rowIndex) {
return null; // 指定された行が存在しない場合
}
const cells = rows[rowIndex].getElementsByTagName('td');
if (cells.length <= colIndex) {
return null; // 指定された列が存在しない場合
}
return cells[colIndex];
}
function showSuggestions() {
const searchValue = document.getElementById('searchInput').value;
const searchByRiver = document.getElementById('searchByRiver').checked;
let matchingRowsFromArr1 = [];
if (searchByRiver) {
matchingRowsFromArr1 = riversInJapan.filter(row => row[1].includes(searchValue));
} else {
matchingRowsFromArr1 = riversInJapan.filter(row => row[3].toString().includes(searchValue));
}
// セレクトボックスをクリア
const selectBox = document.getElementById('suggestions');
selectBox.innerHTML = "";
matchingRowsFromArr1.forEach(row => {
const option = document.createElement('option');
option.value = row[1];
option.textContent = row[1];
selectBox.appendChild(option);
});
// ここでマッチする項目の件数を表示
const matchCount = document.getElementById('matchCount');
matchCount.textContent = `${matchingRowsFromArr1.length}件マッチ`;
// 候補が1つだけの場合、自動的にその値で結果を表示
if (matchingRowsFromArr1.length === 1) {
showMatchingRows();
}
}
function showMatchingRows() {
const selectedValue = document.getElementById('suggestions').value;
const matchingRowFromArr1 = riversInJapan.find(row => row[1] === selectedValue);
const resultTable1 = document.getElementById('resultTable1');
const resultTable2 = document.getElementById('resultTable3');
if (matchingRowFromArr1) {
// arr1のデータを指定された位置に配置
getCell(resultTable1, 1, 0).textContent = matchingRowFromArr1[0];
getCell(resultTable1, 1, 1).textContent = matchingRowFromArr1[1];
getCell(resultTable1, 1, 2).textContent = matchingRowFromArr1[2];
getCell(resultTable1, 1, 3).textContent = matchingRowFromArr1[3];
const matchingRowsFromArr2 = prefectureData.filter(row => row[1] === matchingRowFromArr1[2]);
console.log(matchingRowsFromArr2);
matchingRowsFromArr2.forEach((row2, rowIndex) => {
const targetCell = getCell(resultTable2, rowIndex, 0);
console.log(targetCell);
// arr2のデータを指定された位置に配置
//getcellは、thはカウント対象にならないので番地に注意、tdで配列をつくる
getCell(resultTable3, 0, 0).textContent = row2[0];
getCell(resultTable3, 1, 0).textContent = row2[1];
getCell(resultTable3, 2, 0).textContent = row2[2];
getCell(resultTable3, 3, 0).textContent = row2[3];
getCell(resultTable3, 4, 0).textContent = row2[4];
getCell(resultTable3, 4, 1).textContent = row2[5];
getCell(resultTable3, 4, 2).textContent = row2[6];
getCell(resultTable3, 5, 0).textContent = row2[7];
getCell(resultTable3, 5, 1).textContent = row2[8];
getCell(resultTable3, 5, 2).textContent = row2[9];
});
}
}
</script>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function() {
let checkboxes = document.querySelectorAll('input[type="checkbox"][name="searchType"]');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
if (this.checked) {
checkboxes.forEach(function(cb) {
if (cb !== checkbox) cb.checked = false;
});
}
});
});
});
</script>
css
body,
html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.input_area{
display:flex;
flex-direction:column;
margin:30px;
}
#searchInput ,#suggestions{
width:200px;
}
#resultTable1 {
width:400px;
border-collapse: collapse;
margin:20px;
}
#resultTable1 tr{
height:50px;
}
#resultTable2 {
width:800px;
border-collapse: collapse;
margin:20px;
}
#resultTable2 tr{
height:50px;
}
#resultTable2 td{
width:80px;
}
#resultTable3 {
width:500px;
border-collapse: collapse;
margin:20px;
}
#resultTable3 tr{
height:50px;
}
#resultTable3 td{
width:100px;
}
const prefectureData = [
["通番", "都道府県", "県庁所在地", "人口(2022年時点の概算)", "特産品1", "特産品2", "特産品3", "観光名所1", "観光名所2", "観光名所3"],
[1, "北海道", "札幌市", "525万", "道産子牛", "じゃがいも", "メロン", "小樽市", "旭川動物園", "大雪山"],
[2, "青森県", "青森市", "130万", "りんご", "ガーリックトースト", "ねぶた祭り", "弘前城", "八甲田山", "奥入瀬渓流"],
[3, "岩手県", "盛岡市", "125万", "わんこそば", "盛岡冷麺", "鉄砲玉", "中尊寺", "八幡平", "龍泉洞"],
[4, "宮城県", "仙台市", "230万", "牛タン", "ずんだ餅", "仙台味噌", "松島", "仙台城", "青葉の森公園"],
[5, "秋田県", "秋田市", "100万", "きりたんぽ", "稲庭うどん", "竿燈祭り", "男鹿半島", "田沢湖", "角館"],
[6, "山形県", "山形市", "110万", "さくらんぼ", "冷たいラーメン", "芋煮", "蔵王温泉", "山形城", "立石寺"],
[7, "福島県", "福島市", "190万", "桃", "会津そば", "福島ワイン", "会津若松城", "猪苗代湖", "大内宿"],
[8, "茨城県", "水戸市", "290万", "納豆", "メロン", "梨", "筑波山", "霞ケ浦", "偕楽園"],
[9, "栃木県", "宇都宮市", "200万", "餃子", "とちおとめ", "日光東照宮", "日光山輪王寺", "中禅寺湖", "華厳の滝"],
[10, "群馬県", "前橋市", "190万", "こんにゃく", "上毛かるた", "群馬煮", "赤城山", "榛名湖", "草津温泉"],
[11, "埼玉県", "さいたま市", "730万", "菓子パン", "さきたま古墳", "浦和レッズ", "さいたまスーパーアリーナ", "川越氷川神社", "秩父夜祭"],
[12, "千葉県", "千葉市", "620万", "落花生", "南房総いちご", "千葉ロッテ", "東京湾アクアライン", "成田山新勝寺", "館山"],
[13, "東京都", "新宿区", "1400万", "東京ばな奈", "すき焼き", "寿司", "浅草寺", "東京タワー", "東京ディズニーランド"],
[14, "神奈川県", "横浜市", "920万", "横浜中華街", "象の鼻", "カップヌードル", "みなとみらい", "横浜ランドマークタワー", "鎌倉大仏"],
[15, "新潟県", "新潟市", "230万", "新潟コシヒカリ", "佐渡金箔", "にいがたフェア", "越後湯沢", "佐渡島", "上越国際スキー場"],
[16, "富山県", "富山市", "105万", "白えび", "富山ブラック", "富山湾すし", "立山黒部アルペンルート", "宇奈月温泉", "立山"],
[17, "石川県", "金沢市", "115万", "金沢カレー", "加賀野菜", "金箔", "兼六園", "金沢城", "能登半島"],
[18, "福井県", "福井市", "75万", "越前ガニ", "福井の恐竜", "鳥越祭り", "永平寺", "鳥越祭り", "若狭湾"],
[19, "山梨県", "甲府市", "85万", "甲州ワイン", "甲府焼きそば", "山梨県笛吹川フルーツ公園", "忍野八海", "甲府城", "河口湖"],
[20, "長野県", "長野市", "210万", "りんご", "そば", "信州ミソ", "善光寺", "上高地", "松本城"],
[21, "岐阜県", "岐阜市", "200万", "ほうとう", "守山緑地", "岐阜城", "白川郷", "高山", "柳ヶ瀬"],
[22, "静岡県", "静岡市", "370万", "静岡お茶", "富士宮やきそば", "駿河湾ささえび", "富士山", "伊豆半島", "浜松城"],
[23, "愛知県", "名古屋市", "750万", "みそカツ", "手羽先", "名古屋城", "名古屋テレビ塔", "熱田神宮", "名古屋港アクアリウム"],
[24, "三重県", "津市", "180万", "伊勢うどん", "松阪牛", "伊勢海老", "伊勢神宮", "鳥羽水族館", "志摩スペイン村"],
[25, "滋賀県", "大津市", "140万", "びわ湖", "近江牛", "彦根城", "比叡山", "びわ湖大花火大会", "長浜黒壁スクエア"],
[26, "京都府", "京都市", "260万", "抹茶", "湯葉", "八つ橋", "清水寺", "金閣寺", "嵐山"],
[27, "大阪府", "大阪市", "880万", "たこ焼き", "お好み焼き", "串カツ", "大阪城", "通天閣", "ユニバーサルスタジオジャパン"],
[28, "兵庫県", "神戸市", "550万", "神戸ビーフ", "たらこスパゲッティ", "六甲山", "有馬温泉", "姫路城", "淡路島"],
[29, "奈良県", "奈良市", "130万", "鹿せんべい", "奈良漬", "興福寺", "大仏", "春日大社", "飛鳥"],
[30, "和歌山県", "和歌山市", "90万", "梅", "紀州備長炭", "白浜", "高野山", "熊野古道", "串本"],
[31, "鳥取県", "鳥取市", "55万", "鳥取砂丘", "20世紀梨", "米子", "大山", "皆生温泉", "浜村温泉"],
[32, "島根県", "松江市", "70万", "出雲そば", "隠岐の島", "松江城", "出雲大社", "玉造温泉", "石見銀山"],
[33, "岡山県", "岡山市", "190万", "桃", "きびだんご", "岡山後楽園", "倉敷", "吉備路", "鷲羽山"],
[34, "広島県", "広島市", "280万", "お好み焼き", "もみじ饅頭", "原爆ドーム", "宮島", "平和記念公園", "しまなみ海道"],
[35, "山口県", "山口市", "140万", "ふぐ", "瓦そば", "赤間神宮", "下関", "秋吉台", "角島"],
[36, "徳島県", "徳島市", "75万", "すだち", "とくしまラーメン", "眉山", "阿波おどり", "鳴門の渦潮", "大歩危・小歩危"],
[37, "香川県", "高松市", "100万", "讃岐うどん", "さぬきチキン", "栗", "栗林公園", "金刀比羅宮", "小豆島"],
[38, "愛媛県", "松山市", "140万", "みかん", "たい焼き", "道後温泉", "松山城", "しまなみ海道", "八幡浜"],
[39, "高知県", "高知市", "70万", "かつおのたたき", "土佐酒", "桂浜", "高知城", "四万十川", "足摺岬"],
[40, "福岡県", "福岡市", "510万", "博多ラーメン", "明太子", "太宰府天満宮", "柳川", "久留米", "海の中道海浜公園"],
[41, "佐賀県", "佐賀市", "80万", "佐賀牛", "有田焼", "佐賀城", "武雄温泉", "嬉野温泉", "夢街道ナポレオンロード"],
[42, "長崎県", "長崎市", "130万", "カステラ", "ちゃんぽん", "長崎ランタンフェスティバル", "原爆資料館", "五島列島", "長崎港"],
[43, "熊本県", "熊本市", "180万", "馬刺し", "阿蘇高原ミルク", "熊本城", "水前寺成趣園", "阿蘇山", "産山村"],
[44, "大分県", "大分市", "115万", "地鶏", "別府温泉", "大分城", "地獄めぐり", "九重夢大吊橋", "臼杵石仏"],
[45, "宮崎県", "宮崎市", "110万", "宮崎牛", "ひやご", "青島", "鵜戸神宮", "都城", "高千穂峡"],
[46, "鹿児島県", "鹿児島市", "160万", "さつま揚げ", "黒砂糖", "桜島", "霧島温泉", "知覧特攻平和会館", "屋久島"],
[47, "沖縄県", "那覇市", "146万", "ゴーヤ", "泡盛", "沖縄そば", "首里城", "美ら海水族館", "万座毛"]
];
const riversInJapan = [
["通番", "河川名", "最初の県", "長さ(km)"],
[1, "信濃川", "長野県", 367],
[2, "利根川", "群馬県", 322],
[3, "多摩川", "山梨県", 138],
[4, "荒川", "埼玉県", 176],
[5, "隅田川", "東京都", 23.5],
[6, "鴨川", "京都府", 31],
[7, "四万十川", "高知県", 196],
[8, "野田川", "徳島県", 124],
[9, "吉野川", "徳島県", 196],
[10, "瀬戸内海", "大分県", 450],
[11, "日本海", "山口県", 800],
[12, "五条川", "奈良県", 85],
[13, "石狩川", "北海道", 246],
[14, "天塩川", "北海道", 256],
[15, "旭川", "北海道", 140],
[16, "神崎川", "兵庫県", 50],
[17, "早瀬川", "岡山県", 55],
[18, "淀川", "京都府", 124],
[19, "筑後川", "福岡県", 143],
[20, "福井川", "福井県", 82]
];
この記事が気に入ったらサポートをしてみませんか？