ネットで調べまくりましたが、実現できそうなものが見つけられなかったので質問させてください。
checkboxで指定したidとaタグに指定してあるclass名が一致しない<li>~</li>を非表示にしたいのですが、どのようにすれば実現できるでしょうか?下記の例ですと、idに"area12"が指定してある<li>~</li>を非表示にしたいです。どうぞよろしくお願いいたします。
【例】
<li><a href=""><label><input type="checkbox" checkd id="area10"/>鏡水</label></a></li>
<li><a href=""><label><input type="checkbox" checkd id="area11"/>金城</label></a></li>
<li><a href=""><label><input type="checkbox" checkd id="area12"/>三原</label></a></li>
<a class="area10"><img src="~"/></a>
<a class="area11"><img src="~"/></a>
No.5ベストアンサー
- 回答日時:
こんにちは。
横からですが・・・
普通にご質問文を読むと、若干矛盾を感じながらも、
『チェックボックスに対応する画像要素の表示/非表示を制御したい』
というふうに推測できると思いますし、ANo2様がご回答の内容もそうなっています。
一方で、質問文を何度も読んでみて
>特定のクラスを持つ<li>を非表示にする方法
(li要素にクラス設定はされてないけれど…)
><li><input ~~~>三原</label></li>は表示されたままでした
などから妄想をたくましくしてみると、ひょっとすると
『リストの各項目に対応するリンク(画像)要素が文書内に存在しない場合は、そのリストの項目を非表示にしたい』
という意図のご質問なのでしょうか?
ついでながら、リストの項目内のリンク要素の意味は何なのかも謎ですね。
万一、妄想が当たっていた場合はこんな感じでしょうか?
(jQuery等は不要です)
<script type="text/javascript">
window.onload = function(){
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function(e){
var a = e; while(a && a.nodeName != "LI") a = a.parentNode;
if(a && !document.querySelector("a." + e.id)) a.style.display = "none";
});
}
</script>
fujillin様
御回答内容で実現できました。ありがとうございます。ご指摘の通り、意図した内容がうまく伝わる文章ではなかったです。。
No.4
- 回答日時:
誤解していたかもしれませんが、チェックしたら消すのでしょうか?
であればcheckedのチェックを逆転すればよいでしょう
$('.'+$(this).prop('id')).toggle($(this).prop('checked'));
↓↓↓
$('.'+$(this).prop('id')).toggle(!$(this).prop('checked'));
yambejp様
何度もご回答いただきありがとうございます。fujillin様がご指摘されているとおり、私のつたない説明が原因でうまく伝わっていなかったようです。私が実現したかったのは、fujillin様の解釈の通りでした。この質問のみならず、他の質問でも積極的に御回答していただいていたのに。。大変申し訳ございませんでした。私の説明が意図した通り伝わる文章ならきっと解決できる御回答をしていたはずですよね。本当にお手数をお掛けしてすみませんでした
No.3
- 回答日時:
どこが違うんでしょうね・・・
以下コピペしてみてください
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1. …
<script>
$(function(){
$('input[type=checkbox]').on('change',function(){
$('input[type=checkbox]').each(function(){
$('.'+$(this).prop('id')).toggle($(this).prop('checked'));
});
}).change();
});
</script>
</head>
<body>
<li><input type="checkbox" checked id="area10"/><label for="area10">鏡水</label></li>
<li><input type="checkbox" checked id="area11"/><label for="area11">金城</label></li>
<li><input type="checkbox" checked id="area12"/><label for="area12">三原</label></li>
<a class="area10"><img src="?" alt="area10image" /></a>
<a class="area11"><img src="?" alt="area11image" /></a>
</body>
</html>
No.2
- 回答日時:
teratailにも書きましたが、こうなります
<script src="js/jquery.js"></script> <!-- jqueryは適当に組み込んでください -->
<script>
$(function(){
$('input[type=checkbox]').on('change',function(){
$('input[type=checkbox]').each(function(){
$('.'+$(this).prop('id')).toggle($(this).prop('checked'));
});
}).change();
});
</script>
<li><input type="checkbox" checkd id="area10"/><label for="area10">鏡水</label></li>
<li><input type="checkbox" checkd id="area11"/><label for="area11">金城</label></li>
<li><input type="checkbox" checkd id="area12"/><label for="area12">三原</label></li>
<a class="area10"><img src="~"/></a>
<a class="area11"><img src="~"/></a>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquery ドロップダウンメニュー...
-
javascript テキストエリアを1...
-
【jQuery】遅延実行(タイムラ...
-
大量のチェックボックス状態取...
-
div要素をランダムに表示させたい
-
チェックボックスに入っている...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
textareaに画像を表示したい
-
条件分岐でキーが入力されてい...
-
iframe内のリンクが飛ばないの...
-
JavaScriptで変更した属性の元...
-
c++std::string型をTCHARに変換...
-
ラズパイでno module named zbar
-
CSS <div>の入れ子が反映さ...
-
スワップイメージが上手く動作...
-
removeEventListenerについて
-
CSSで指定したwidthをマウスで...
-
横並びの画像を3枚時間差でフェ...
-
JSPでの画像ファイル表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
ネストされたチェックボックス...
-
jQueryのeqで最後からn番目以降...
-
大量のチェックボックス状態取...
-
スムーズスクロールとfleXcroll...
-
jQueryでネスト構造の<li>がク...
-
チェックボックスに入っている...
-
スタイルシートでロールオーバ...
-
画像のリンクをクリックすると...
-
jquery中のmatch関数が正常に動...
-
javascript テキストエリアを1...
-
javascriptでEnterキーをtabキ...
-
jQueryで電卓を作っているのですが
-
javascriptで教えてください。 ...
-
どの<li><a> が押されたか判別...
-
多階層ドロップダウンのスマホ...
-
動画サイトのURLからswfを抜き...
おすすめ情報
実現可能であれば、何でも構いません。よろしくお願いいたします!
yambejp様
teratailとどちらにコメントしようかと悩みましたがこちらにコメントさせていただきます。
御回答いただきました内容でプレビュー確認してみましたが、area12の<li>~</li>が表示されたままの状態でした。もう一度ご教授いただければ助かります。
御返事ありがとうございます。<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1. …の部分は最新のCDNにしてあとはコピペで確認してみましたが、<li><input type="checkbox" checked id="area12"/><label for="area12">三原</label></li>は表示されたままでした。度々申し訳ないですが、再度ご教授いただけないでしょうか。