以下のように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件

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

masaya_ohashi

総合スコア9210

SugiuraY

2017/03/22 02:53

コメントありがとうございます。 htmlのご指摘もありがとうございます。labelの使用についても理解致しました。

行動規範の内容に同意します

ベストアンサー

他の方の指摘にもありますが、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

motuo

総合スコア3027

pegy

2017/03/22 02:59

ご回答ありがとうございます。招致を致しました。

行動規範の内容に同意します

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