jQuery 内容をコピーする

Ajax
Javascript

jQuery 内容をコピーする

jQueryを利用すれば、動的にページのある部分をコピーして違う場所に表示できたりします。
いくつまで内容を増やしたいか、ユーザーに任せる場合などは、これが便利です。

 //Javascript内 事前にjQueryは読み込んでおきます。
 function addBold(){
 	$("b").clone().prependTo("p");
 }
 
 //HTML
 <input type="button" onclick="addBold();" value="太字部分をコピー" />
 <b>Hello</b><p>, how are you?</p>

ボタンをクリックすると、

の前にHelloがコピーされます。

jQuery 全部チェックする 全部チェックを外す

Ajax

jQuery 全部チェックする 全部チェックを外す

チェックボックスを利用するフォームでは、当てはまる項目が多い場合は、手で全部選択するのは面倒ですよね?
また、選択した後に、「あ、違った!」ということで、全部外すのも面倒ですよね?

jQueryを利用して「全選択」・「選択を外す」ができます。
下記にサンプルを載せておきます。

 /**
  * Javascript 全てのチェックボックスをチェック・解除する
  */
 //全てのチェックボックスをチェック
     $(function(){
        $("#toggle").click(function(){
             $('.chkbox').attr('checked', $(this).attr('checked'));
             $('#toggleoff').removeAttr('checked', $(this).attr('checked'));
         });
    });
 
 //全てのチェックボックスのチェックを解除
     $(function(){
        $("#toggleoff").click(function(){
            $('.chkbox').removeAttr('checked', $(this).attr('checked'));
            $('#toggle').removeAttr('checked', $(this).attr('checked'));
         });
     });
 <!--HTML-->
 <input class="chkbox" type="checkbox" name="fruit" value="みかん">
 <input class="chkbox" type="checkbox" name="fruit" value="りんご">
 <input id="toggle" type="checkbox"> すべて選択する<br>
 <input id="toggleoff" type="checkbox"> 選択を解除<br>
 

jQuery 他ページのコンテンツを取得する

Ajax

jQueryを使って他のページのコンテンツを読み込んで表示させる方法です。
動的なサイトにすることもできるし、SSI的に使えますね。

/inc/menu.htmlを読み込んで、Webページの

内に表示したい場合

jQueryを読み込んでからmenu.jsという外部ファイルを作って次のように記述します。

 window.onload = function() {
 $("#menu").load("/inc/menu.html");
 }

参考:jQuery Ajax/load
http://docs.jquery.com/Ajax/load#urldatacallback

jQuery日本語チュートリアル
http://docs.jquery.com/Tutorials#.E6.97.A5.E6.9C.AC.E8.AA.9E.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB

jQuery セレクトメニューが変更されたときの処理

Ajax

jQuery セレクトメニューが変更されたときの処理

jQueryを使って、セレクト(

✨目を輝かせて✨仕事をしている人がいます。プログラマー募集中!

目を輝かせて仕事をしている人がいます

カテゴリー

広告

アーカイブ

最近の投稿