チェックボックスで最低１つ選んでいるかを判定する - jsdo.it - Share JavaScript, HTML5 and CSS
複数のチェックボックスでから最低１つ選んでいるかを判定する状況が結構あったので シンプルにまとめたものを作ってみました。 「input」タグに「group」属性を追加して 同じ値に設定された中でチェックを付けた数で判定します。 動作確認済： Chromeのみ 要jQuery $("input[group='group1']").click(function(){ // チェックを付けた数を取得する if($("input[group='group1']:checked").length > 0){ $("#msg").html("OK!!"); } else { $("#msg").html("どれか最低1つチェックを付けてください。"); } }); <div id="msg">どれか最低1つチェックを付けてください。</div> <ul> <li><input type="checkb
jQuery で複数の ID をまとめて選択する方法
jQuery で複数の ID の要素をまとめて選択する方法についてです。 jQuery ではワイルドカード指定はできないため別の方法を使うことになります。 ちなみに Zepto.js でも同じ方法が使えます。 次のように ID に一定のパターンがある複数の要素をまとめて選択したい場合を考えてみましょう。 <div id="header-1">hello</div> <div id="header-2">world</div>
jQueryを利用してselected、checkedで選択状態に - matsukaz's blog
jQueryを利用してコンボボックスを選択状態にできないかなって思って調べていたら、selectで指定のものを選択状態にってエントリを発見。早速試してみました。 <select id="col1" name="col1"> <option value="val1">値1</option> <option value="val2">値2</option> <option value="val3">値3</option> </select> ってHTMLに対して $("#col1").val("val2"); って記述でほんとに選択状態にできました。素敵過ぎです。 checkboxとかradioとかはどうなのかと思ったら、こっちは $(".col2[@value=val2]").attr("checked","checked"); って記述でいけるみたい。これまたシンプル！ HTML中にsel
jQueryで要素の表示・非表示を切り替える方法について - Qiita
jQueryで要素の表示・非表示をする方法についてまとめてみました。 よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。 まず、要素の表示・非表示をするには以下の３種類の方法があります。 １．要素の非表示 ２．要素の表示 ３．要素の表示・非表示の切り替え １．要素の非表示 下記HTMLファイルがあった時に表示されている要素を隠すには、複数の方法があります。
jQuery: 指定値のラジオボタンを選択するやり方 – BmathLog
サンプルHTML <input type="radio" name="mobilephone" value="docomo">docomo <input type="radio" name="mobilephone" value="au">au <input type="radio" name="mobilephone" value="softbank">softbank <input type="radio" name="mobilephone" value="other">other jQuery で要素を選択 例えば au を選択するとき $("input[name='mobilephone']") .filter(function(){ return ($(this).val() == 'au')}) .attr("checked", true); こっちのほうがわかりやすい $(
ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 - Qiita
<select id="select" name="select"> <option value="0">sample</option> <option value="1">sample1</option> <option value="11">sample11</option> <option value="101">sample101</option> </select>
jQueryを使ってブラウザにhtmlタグを含めた文字を表示する｜ヨシキミナトヤ.COM
jQueryを使ってテキストを表示してみる htmlでタグを使って書けば普通に表示されるテキスト。 わざわざjQueryを使ってテキストだけ表示する事はほとんどありませんが、ではそらで書けるかと言われると自信が無い。。。javascriptは基本的に全部そうですが。 表示の基本ですので覚えておきます。 最初に jQueryは設置済みとして書いております。 jsの記述は外部ファイルに記載して読み込こむ事を前程に書いております。 単純に書いたものを表示する まずは書いたものをそのまま表示してみます。 htmlとjsは以下の通り。 html <div id="TEST01"></div> js $(document).on('ready',function(){ $("#TEST01").text("そのまま文字出力します"); }); 表示サンプルはこちら 書いたまま表示されるので、htmlの
【jQuery】要素の表示・非表示について (show, hide, toggle) - TASK NOTES
jQueryで要素の表示・非表示を切り替える方法についてです。 要素の非表示 ( hide ) hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。 <body> <button>click</button> <p>表示されてるメッセージ</p> </body> $(function() { $('button').click(function(){ $('p').hide(); }); }); .hide()はcss('display', 'none')と同じ意味です。 $(function() { $('button').click(function(){ $('p').css('display', 'none'); }); }); .hide() | jQuery 1.9 日本語リファレンス | js STUDIO サンプ
jQueryでDOM要素の削除 - 星屑日記
jQueryを使ってDOM要素を削除しようとしたときにかなり戸惑ったのでメモ代わりにブログ更新。jQueryにはDOM要素を削除するためのメソッドが2つあってremove()とempty()がそれ。 remove()：それを呼び出したDOM要素自体とそのすべての子要素を削除する。 empty()：それを呼び出したDOM要素のすべての子要素を削除する。 大まかな理解はこれで合ってるのかな。でもjQueryオブジェクトは残るとか書いてあるし、深いところはわからない。具体的には、 <body> <div id="div1"> div1要素 <p>div1要素の子要素1</p> <p>div1要素の子要素2</p> <p>div1要素の子要素2</p> </div> </body>に対して $("#div1").remove();を実行すると、 <body> </body>となり、また以下のように
jQuery のタグ挿入系のメソッドの動作一覧 - 強火で進め
いつもどれだったけ？と成ってしまうのでそれぞれのメソッドを使った時にどの様にタグが挿入や移動されるかのメモ。 さっと確認したい人向けのまとめ after 引数に指定したタグを並列な階層の最後に追加。 例) #a の後に <div>new tag</div> を追加。 $('#a').after('<div>new tag</div>'); insertAfter 引数に指定したタグの後ろに移動。 例) #b の閉じタグ後に #b が移動。 $('#d').insertAfter('#b'); append 引数に指定したタグを自身のタグ内の最後に追加。 例) #a タグ内の最後に <div>new tag</div> を追加。 $('#a').append('<div>new tag</div>'); appendTo 引数に指定したタグの最後に自身のタグを移動。 例) #d タグ内の最後
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
既存の要素を別の要素で置き換えるには？ ― replaceWith／replaceAllメソッド