根据单选按钮的选择更改标签文本 - Change label text based on the radio button selection

Change label text based on the radio button selection

我想根据单选按钮的选择更改标签文本。你能帮我轻松地做这件事吗。这是我的密码。

<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>

我用更好的方式为您重写了代码。当你有jQuery时，最好使用它。不要因为处理JavaScript而搞砸了。jQuery就是为您做这件事的。

<script type="text/javascript">
          $(document).ready(function()
          {
             if ($('#business').is(':checked')) 
             {
               $('#labelName').text("Company Name");
               $('#labelNum').text("Reg No.");
             }
          }
        );
</script>

您将jquery与js混合在一起，所以这里是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>

JsFiddle

onclick="document.getElementById('labelName').innerHTML='NEWLABELNAME'"

您可以通过向该输入添加一个更改侦听器并获取所选一个的值来实现这一点

我添加了一些HTML5属性以避免获得更多DOM请看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/

我希望这能有所帮助：）