JavaScriptでのcheckbox作成
- JavaScriptでのcheckbox作成方法について教えてください
- ToDoメモのリストにチェックボックスを追加する方法を教えてください
- チェックボックスのサイズを大きくする方法を教えてください
- ベストアンサー
JavaScriptでのcheckbox作成
JavaScriptのcheckbox作成について教えてください 突然のリクエスト申し訳ございません お時間があればご回答お願いします ToDoメモを作っておりまして、仕様としては input type="text"に文字を書き込んで追加ボタンを押せばtextboxの下に 書き込まれた内容がリストのような形で表示されます そのリストの横にチェックボックスをつけてチェックして削除ボタンを押すと削除できるという仕組みです ですがチェックボックスのサイズが小さいです どうすればサイズを大きくできるのでしょうか？ JavaScriptでcheckboxを作成するコードは下記の通りです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); // // TODO: Please edit your JavaScript code here // </script> <style> h1 { color : #4795F4; } </style> </head> <body background="img/st18.png"> <center><h1>ToDoメモ</h1> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> </center> <!--新規追加ボックス--> <center><div id="new_div"> <input id="new_txt" type="text" value="" style="width:270px" size="40"/></center> <br><img src="img/blmenu.gif" width="50" height="25" id="add_btn" /> </div> <!--項目一覧--> <div id="items_div"></div> <!--項目の操作パネル--> <div id="control_div"> <img src="img/blmenu.gif" width="50" height="25" id="done_btn"/> </div> <!--Android1.6対策--> <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こちらでどうでしょう。 //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; //CSSを指定する場合 cb.className = "LargeRadio"; //直接スタイルを書き換える場合 cb.style.width = "24px"; cb.style.height = "24px"; cbItems.push(cb);
その他の回答 (1)
- askaaska
- ベストアンサー率35% (1455/4149)
スタイルシートで大きくすればいいと思うわ 「checkbox スタイルシート 大きく」 とかでぐぐればいいはず
関連するQ&A
- JavaScriptについて
以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものです なぜか追加ボタンを押しても反応がありません なぜでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1> <!--新規追加ボックス--> <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div> <!--項目一覧--> <div id = "items_div"></div> <!--項目の操作パネル--> <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryが反映されません＞＜
jQueryとJavaScriptでToDoメモを作っています 下記のコードなのですが 削除ボタンが表示されないのとToDoリストがおかしな位置に来ます どうすればいいのでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet"type="text/css"href="css/style.css"> <script> monaca.viewport({width: 340}); document.addEventListener("deviceready",onDeviceReady,false); function onDeviceReady() { document.addEventListener("backbutton", onBkbtn, false); } function onBkbtn() { location.href = "index.html"; } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>CheckList</h1> </div> </center> <!--新規追加ボックス--> <center> <div id="new_div"> <input id="new_txt" type="text" value="" placeholder="ToDoを書き込んでください" style="width:270px" size="40"/> </center> <br> <div data-role="button" data-icon="plus" id="add_btn">追加</div> </div> <!--項目一覧--> <div id="items_div"></div> <div id="control_div"> <div data-role="button" data-icon="delete" id="done_btn">削除</div> </div> </div> <!--Android1.6対策--> <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; tr.executeSql(query, [] ,loadItems_onResult); }); } function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input"); cb.className = "large"; //CSSに対応させる cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span"); label.innerHTML = memo; var line = document.createElement("div"); line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>
- ベストアンサー
- JavaScript
- javascript について追加の質問
質問NO6591909＝3/14 10：59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？ IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。 因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
- javascriptについて教えてください。
divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScripｔについての質問です。
javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx とpd1が作動し、div ID1がプルダウンメニューのように開くようになっています。 それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？ どなたか教えていただければ有り難いです・・・・・。
- ベストアンサー
- JavaScript
- JavaScriptのGPSについて
現在地の名前を入力し、GoogleMapで表示してその地図を保存するというものを作ったのですが 以下のコードで現在地を取得するとなぜかiPhoneでもAndroidでもバルセロナが表示されます なぜなのでしょうか？ 開発環境はMonacaです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <h1>ブックマークMAP</h1> <div id="new_div"> 店名：<input id="name_txt" type="text" value="" size="20" /><br /> <input id="save_btn" type="button" value="記録" /> </div> <div id="list_div">なし</div> <script> function $(id) { return document.getElementById(id); } //初期処理 var items = []; window.onload = function() { if (window.localStorage == undefined && navigator.geolocation == undefined) { alert("HTML5未対応端末です"); return; } //既存リスト表示 var list = localStorage.getItem("shoplist"); if (list == null) { list = ""; }else{ items = list.split("\n"); showItems(); } //記録ボタンを押したときの設定 $("save_btn").onclick = save_btn_clickHandler; }; //ブックマーク一覧の表示 function showItems() { var map_url = "http://maps.google.co.jp/maps?q="; var html = "<ul>"; for (var i in items) { var data = items[i].split("\n"); var name = data[0]; var lat = data[1] var lon = data[2] var link = "<a href='"+map_url+lat+","+lon+"'>"+name+"</a>"; html += "<li>"+link+"</li>"; } html += "</ul>"; $("list_div").innerHTML = html; } //保存ボタンを押したときの設定 function save_btn_clickHandler() { if ($("name_txt").value == "") { alert("場所を入力してください"); return; } //位置情報の取得 navigator.geolocation.getCurrentPosition( successCallback, errorCallback); $("save_btn").value = "現在地取得中" } //成功したとき function successCallback(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; var name_txt = $("name_txt"); //場所+位置情報を保存 var item = name_txt.value + "/t" + lat + "/t" + lon; items.push(item); var list = items.join("\n"); try { localStorage.removeItem("shoplist"); localStorage.setItem("shoplist", list); } catch (err) { alert("保存失敗"); } $("save_btn").value = "記録"; name_txt.value = ""; showItems(); } //失敗したとき function errorCallback(err) { alert("失敗("+err.code+")"+err.message); $("save_btn").value = "記録"; } </script> </body> </html>
- ベストアンサー
- JavaScript
- JavaScript オンマウスで画像切り替え、テキスト切り替え
javascriptで困っています。 あるテキストに一回のオンマウスで、 idを持った箇所の画像を切り替え、 また別のidをもった箇所にテキストを表示させたいのですがうまくいきません。 今までのコードはこちらです。 script -------------- function swap(n) { var items = [ { TextA:"あああ", ImageB:"../../common/logo.gif"}, { TextA:"２２２", ImageB:"../../common/logo.gif"}, { TextA:"３３３", ImageB:"../../common/logo.gif"} ]; var o = document.getElementById("Main"); $("Txt").innerText = items[n].TextA; $("Photo").src = items[n].ImageB; } html ---------- <div id="Main"> <img src="../logo.gif" alt="" name="Photo" width="120" height="60" id="Photo"> <div id="Txt" name="Txt">最初</div> </div> <A href="#" onmouseover="swap(0)">１</A><br> <A href="#" onmouseover="swap(1)">２</A><br> <A href="#" onmouseover="swap(2)">３</A> 詳しい方、どうぞご教授よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptで画像に連動してテキストの内容
ジャバスクリプトを使って３枚の画像をクリックで入れ替え（ここまではできています。）その画像に連動した形で写真下のテキストフィールド内の文字を変えたいのですが、やり方がわかりません。 クリックで画像と同時に変えるにはなにかテクニックがいるのでしょうか？（withなんてのがあったんですが、これを使えば良いのでしょうか？ <script language="javascript"> var no=1; var su=3; var text11=1; function func3() { var img1 = document.getElementById('img1'); no++; if (no>su){ no=1; } var gazo='s5_'+no+'.jpg'; img1.src=gazo; } </script> <img src="s5_1.jpg" width="320" height="481" hspace="125" vspace="10" id="img1" onclick=" func3();" /> <div class="syasinnsita"> <textarea name="text11" cols="78" id="text11">写真をクリックしてください。解決法を指南します</textarea>
- 締切済み
- その他（インターネット・Webサービス）
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
補足
JSで呼び出してるのでCSSでは出来ませんでした........