jQuery Mobileのラジオボタンを選択解除できるようにしたいんです - なんでや。。
やり方によるが、「二度押し」で解除させることができなくてハマった。 「もうお馴染みのラジオボタン」は1度選択したら最後解除できない、というのは利用者としてもおおむね常識だと思う。むしろ選択解除できるようにしたいものはプルダウンリストを使う。 スマートフォンだと、プルダウンで表現するとせっかくのタッチデバイスなのにいちいちツータッチ必要で面倒臭い、ラジオボタンにしてワンタッチにしたいという欲求が……ないですかね。 ところがラジオボタンだと選択解除ができないという。 jQuery Mobileでラジオボタンを利用すると、こうラジオボタンというより押しボタン式選択装置のような見た目になりますよね。で利用者としては「これ二度押ししたら選択解除できるんじゃね」と思いそう……ではないですかね。いやそうしてあげたい。 取り得る道として 上述通り二度押しで選択解除 クリアボタン ラジオボタンやめて排他選択
二度押しで選択解除できるラジオボタン
解除できるラジオボタンを設置したいときもあります。 解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。 ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。 JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。 選択肢１ 選択肢２ 選択肢３ <script> $(function(){ var nowchecked = $('input[name=xxxx]:checked').val(); $('input[name=xxxx]').click(function(){ if($(this).val() == nowchecked) { $(this).prop('checked', false); no
id をつけているtdタグの値をjQueryで取得したい
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
jQueryでテキストボックスの値を取得する (jQuery + JavaScript プログラミング)
jQueryでテキストボックスの値を取得するコードを紹介します。 概要 テキストボックスの値を取得するには、セレクタでテキストボックスを選択し、val()メソッドを呼び出します。 コード 以下のコードを記述します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery-2.0.3.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#Button1")
jQuery.Event - jQuery 日本語リファレンス
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。（コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません） オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
jQueryでwindow.onloadを書く方法 - 小さい頃はエラ呼吸
はじめに JavaScriptのwindow.onloadやは、jQueryで書く場合にどうやって書いたら良いか？ jQueryでドキュメントがロードされた場合の処理を書く jQueryを使って、ドキュメントがロードされた場合の処理を書く場合は以下のようなコードを書きます。 $(document).ready(function(){ }); ただし、この定義を書いた場合はbodyタグのonloadイベントは定義しないこと。readyイベントが発生しなくなるようです。 この関数を使う場合、bodyのonloadイベントには何も書かないようにしてください。readyイベントが実行されなくなってしまいます。 ready(fn) - jQuery 日本語リファレンス 以下のエントリもあわせてどうぞ jQueryのscriptタグを一瞬でコピペできるScriptSrc.netが便利 jQueryでT
テーブルの行ごとリンクをクリック出来るようにする
Result jQueryjQuery(function($) { //data-hrefの属性を持つtrを選択しclassにclickableを付加 $('tr[data-href]').addClass('clickable') //クリックイベント .click(function(e) { //e.targetはクリックした要素自体、それがa要素以外であれば if(!$(e.target).is('a')){ //その要素の先祖要素で一番近いtrの //data-href属性の値に書かれているURLに遷移する window.location = $(e.target).closest('tr').data('href');} }); });csstd, th { padding: 5px 10px; } thead th { background: #110303; color: #
jqueryを使ってajaxを行う方法
ajaxを使うと、Javascriptを使ってホームページを再度読み込まなくても、サーバーとデータをやり取りをして表示を変更することができます。 .loadを使う サンプルでnews.htmlの中の#news要素を読み込ませます。 $(function(){ $("button").click(function(){ $(".load").load("news.html #news"); }); }); $("button").click(function(){ 要素buttonをクリックしたときに命令が行われます。 $(".load").load("news.html #news"); セレクタで選んだ.loadの部分に news.htmlの#newsを読み込ませて表示しています。 別ページにある部分を読み込ませたいという時にも使えますよ。 .ajaxを使う サーバーからのリクエストやレ
頭が$で始まる JavaScript の変数名―jQuery の命名則でドルマークを使う意味・由来 | 黒くないすべてのものはカラスではない
買ったまま長いことツンドクだった jQuery Cookbookを最近パラパラと読んでいます。 発行が2年前ということもあり、updateの速いjQueryの解説書としてはもうそろそろ 2nd Editonが出てもおかしくない時期(※)ですので今買うのはあまりお勧めしませんが、basic部分では十分役に立つ内容です。 ※ただし2013年1月5日時点ではまだ2nd editionはオライリの近刊予告リストにも入っていません。 パラパラとめくっているうちに、いくつか次のような変数宣言があるのに気が付きました。 var $element = … var $item = … JavaScriptで、$で始まる変数宣言というのをみた記憶がなかったので「アレッ」と思いました。 一瞬、著者が perlのコードと書き間違えたのではないかと思ったのですが、同書をよく読むと次のような一説がありました。 “…
ラジオボタンのチェックを全てはずせるようにしてみました – 大阪のシステム開発・WEBシステム開発会社技術担当スタッフの覚書き、子だぬきの技術習得ノート
ラジオボタンのチェックって一度つけるとはずせないので、 チェックがついてるラジオをもう一度クリックすることではずせるようにしました。 男 女 ＜script type="text/javascript" src="jquery.min.js"＞＜/script＞ 男 女 ＜script type="text/javascript"＞ $(function() { // ラジオにチェックが付いていてチェックしたらチェックはずす $('input[type="radio"]').click(function () { id = this.id; name = $('#' + id).attr('name'); if ($('#' + id).hasClass('chkRadio')) { $("input[name='" + name + "']").removeClass('chkRadio
jQueryオブジェクトの裏側をのぞいてみよう！ · DQNEO日記
jQueryオブジェクトとは何か？ 最初に答えを言います。 jQueryオブジェクとは、jQuery.fn.jQuery.initクラスのインスタンスである 下記の式を評価してみればわかります。 var obj = $('div'); alert(obj instanceof jQuery.fn.init); // => true Google Chrome Developper Toolsで変数を見てみると、確かにそのように表示されます。 次に、jQueryのソースコードを見てみましょう。 冒頭にこのように書かれています。 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, (ここでrootjQueryとは$(document
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
h1〜h6で作った文書の階層を元にメニューを自動生成してくれるjQueryプラグイン「pageMenu」:phpspot開発日誌
h1〜h6で作った文書の階層を元にメニューを自動生成してくれるjQueryプラグイン「pageMenu」 2011年07月07日- $ pageMenu plugin 0.0.2 | jQuery Plugins h1〜h6で作った文書の階層を元にメニューを自動生成してくれるjQueryプラグイン「pageMenu」 HTMLでH1〜H6で綺麗に階層的に文書を記述しておくと次のようなページメニューを自動で作ってくれてページ内リンクしてくれるというものです。 自分で作ると文書追加の際に修正しなくてはならず、漏れも発生しそうですが自動でやることでその心配や手間はゼロになります。 初期化もカンタン。 jQuery('h2').pageMenu(); 綺麗にHTMLを書いている方はこの1手間でかなり使いやすくなりますね 関連エントリ iOSのシェイクイベントを取得できるjQueryプラグイン「gS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://forum.jquery.com/portal/en/community/topic/get-id-of-current-element