1

ラジオボタンの選択に基づいてラベルテキストを変更したい。簡単にできるように教えてください。これが私のコードです。

<div class="control-group "> 

            <div class="controls">
              <label class="radio inline">
                   <input type="radio" name="btype[]" id="private" value="private" checked>Private
              </label>
              <label class="radio inline">
                    <input type="radio" name="btype[]" id="business" value="business">Business Advertiser
              </label>
            </div>
    </div>

これは、テキストを変更したいラベルです

<div class="control-group " > 
          <label class="control-label" id="labelName">Name</label>
            <div class="controls">
              <div class="input-prepend">
                <span class="add-on"><i class="icon-user"></i></span>
                <input type="text" class="input-xlarge" id="name" name="name" placeholder="">

              </div>
            </div>
    </div>

    <div class="control-group ">
          <label class="control-label" id="labelNum">NIC</label>
            <div class="controls">
              <div class="input-prepend">
                <span class="add-on"><i class="icon-user"></i></span>
                <input type="text" class="input-xlarge" id="regNum" name="regNum" placeholder="">

              </div>
            </div>
    </div>

これは私のjavascriptです

 <script type="text/javascript">
          $(document).ready(function()
          {

             if (($('input[name=btype]:radio:checked').val())=="business") 
             {
               document.getElementById("labelName").innerHTML="Company Name";
               document.getElementById("labelNum").innerHTML="Reg No.";
             }
          }
        );
        </script>
4

4 に答える 4

1

より良い方法でコードを書き直しました。jQuery をお持ちの場合は、それを最大限に活用してください。JavaScript の処理で混乱しないでください。jQuery はそれを行うためにあります。

<script type="text/javascript">
          $(document).ready(function()
          {
             if ($('#business').is(':checked')) 
             {
               $('#labelName').text("Company Name");
               $('#labelNum').text("Reg No.");
             }
          }
        );
</script>
于 2013-07-22T05:58:02.023 に答える
0

Jsフィドル

onclick="document.getElementById('labelName').innerHTML='NEWLABELNAME'"
于 2013-07-22T06:00:42.700 に答える
0

その入力に変更リスナーを追加し、選択した値を取得することでこれを実現できます

より多くの DOM を取得しないように、いくつかの HTML5 属性を追加しました。data-text

<div class="control-group "> 

            <div class="controls">
              <label class="radio inline">
                   <input type="radio" data-text="private" name="btype[]" id="private" value="private" checked>Private
              </label>
              <label class="radio inline">
                    <input type="radio" data-text="Business Advertiser" name="btype[]" id="business" value="business">Business Advertiser
              </label>
            </div>
    </div>

これがあなたのJSとそのjQueryです

$(document).ready(function(){
    $('input[name="btype[]"]').change(function(){
        alert($(this).data('text')); 
    }); 
});

価格などの属性以上のものを追加data-*して、使用してその値を取得できます$(this).data('*');

HTMLを有効にするためにこのように使用され、親テキストの取得を避けるために使用しました

このフィドルをチェックしてくださいhttp://jsfiddle.net/gK6bU/1/

これが役立つことを願っています:)

于 2013-07-22T06:01:22.033 に答える
0

あなたはあなたのjsにjqueryを混ぜているので、ここにjqueryがあります

<script type="text/javascript">
  $(document).ready(function(){
    $('input[name=btype]:radio:checked').click(function(e){
      if($(e.currentTarget).val()==='business') {
        $("#labelName").text("Company Name");
        $("#labelNum").text("Reg No.");
      }
    });
  });
</script>
于 2013-07-22T05:58:22.187 に答える