Q&A
ご回答ありがとうございます。
招致を致しました。
以下のようにradioボタンとその選択肢のテキスト（良い、悪い）をhideしたいのですが、
ボタンだけ消えてテキストは隠せませんでした。
このinput要素をdivで囲みdiv idのセレクタでhideした場合には隠すことができまた。
1.セレクタ#r1,#r2をhideしても消えてくれないのはあくまで隠す対象はタグだけという仕様なのでしょうか？
2.divで囲ってできましたが、まいかこのradioタグやテキストを挟む要素をdivで囲むのは煩雑です。テキストを伴うタグをどちらも隠すことができるシンプルな方法はございますでしょうか？
HTML
1<input id="r1" type="radio" name="btn" value="good">良い</input> 2<input id="r2" type="radio" name="btn" value="bad">悪い</input>
Javascript
1$('#r1,#r2').hide;
回答3件
0
HTML
1<input id="r1" type="radio" name="btn" value="good">良い</input> 2<input id="r2" type="radio" name="btn" value="bad">悪い</input>
そもそもこの書き方自体がHTMLのルールに則っていません。inputタグは閉じタグが存在しないので、そもそも良いとか悪いをinputの閉じタグで挟んでいること自体が構文エラーです。jQueryはHTMLのルールに則ってinputタグの開きタグ部分だけを消しているので、質問１についてはテキスト部分が消えないのは正しい動作です。
先程の構文エラーについて訂正するのであれば、本来ラジオボタンに名称をつけるタグとしてlabelというタグがあります。
HTML
1<!--labelタグでinputとテキストをまるごと挟んで関連付ける--> 2<label><input id="r1" type="radio" name="btn" value="good">良い</label> 3<label><input id="r2" type="radio" name="btn" value="bad">悪い</label> 4<!--またはlabelのfor属性でinputのidを指す--> 5<input id="r1" type="radio" name="btn" value="good"><label for="r1">良い</label> 6<input id="r2" type="radio" name="btn" value="bad"><label for="r2">悪い</label>
なので、テキストをhideするのであればlabelタグを指定して消す必要があります。
投稿2017/03/22 01:56
総合スコア9210
0
ベストアンサー
他の方の指摘にもありますが、labelを利用すると付属する文字ごと非表示にする事が出来ます。
jquery側ではlabelのidを指定して、hideをしましょう。
###サンプルコード
html
1<!DOCTYPE html> 2<html> 3<head> 4<title>Sample</title> 5<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js" ></script> 6<script type="text/javascript"> 7 function UpdateState() { 8 value = $("input[name='btn']:checked").val(); 9 switch (value) { 10 case "good": 11 $('#l1').hide(); 12 $('#l2').show(); 13 break; 14 case "bad": 15 $('#l2').hide(); 16 $('#l1').show(); 17 break; 18 default: 19 break; 20 } 21 } 22 23 $(document).ready(function () { 24 UpdateState(); 25 }); 26 27 $(document).ready(function () { 28 $("input[name='btn']").click(function () { 29 UpdateState(); 30 }); 31 }); 32</script> 33</head> 34<body> 35 <label for="r1" id="l1" ><input id="r1" type="radio" name="btn" value="good"/>良い</label> 36 <label for="r2" id="l2"><input id="r2" type="radio" name="btn" value="bad"/>悪い</label> 37</body> 38</html>
投稿2017/03/22 02:09
総合スコア3027
0
UIを考慮すると面倒でもlabelで囲むのが妥当では？
<label><input id="r1" type="radio" name="btn" value="good">良い</label> <label><input id="r2" type="radio" name="btn" value="bad">悪い</label>
追記
姑息な手段でバグの温床のなりかねないのでお勧めはしませんが、
radioボタンの後ろのテキストノードに強制的にspanをつけて
コントロールするとか、できないことはないです
javascript
1<script> 2$(function(){ 3 $('input[type=radio]').each(function(){ 4 var n=$(this).get(0).nextSibling; 5 if(n.nodeName=='#text'){ 6 $(this).after($('<span>'+n.nodeValue+'</span>')); 7 n.parentNode.removeChild(n); 8 } 9 }); 10 $('#btn').on('click',function(){ 11 $('#r1,#r1~span,#r2,#r2~span').toggle(); 12 }); 13}); 14</script> 15 16<form> 17<input id="r1" type="radio" name="btn" value="good">良い 18<input id="r2" type="radio" name="btn" value="bad">悪い<br> 19<input id="btn" type="button" value="view/hide"> 20</form> 21
あくまでも頭の体操レベルで考えてください
投稿2017/03/22 01:57
編集2017/03/22 02:14
総合スコア117714
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/22 02:53