根据单选按钮选择更改标签文本答案

【问题标题】：Change label text based on the radio button selection根据单选按钮选择更改标签文本
【发布时间】：2013-07-20 18:51:39
【问题描述】：

我想根据单选按钮的选择更改标签文本。你能帮我轻松完成吗？这是我的代码。

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

【问题讨论】：

将 onclick="document.getElementById('labelid').innerHTML='REPLACEMENT'" 添加到您的单选按钮
你知道如果你把它放在 jsfiddle.net 中会让这个超级容易解决的
既然你使用的是 jquery - $(document).ready(function()，为什么你使用纯 JavaScript - getElementById("labelNum") 而不是 jquery - $("#labelNum")？
既然您是新来的，请接受解决您问题的答案（打勾）。向上投票（向上箭头）为您提供信息或帮助您的答案。向下投票（向下箭头）是假的答案。

标签： php javascript text radio-button

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

JsFiddle

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

【讨论】：

【解决方案4】：

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

我添加了一些 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/

我希望这可以帮助:)

【讨论】：