Question

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

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

Answer 1

我以更好的方式为您重写了代码。当你有jQuery使用它是最好的。不要通过处理JavaScript搞砸了。 jQuery就是为你做的。

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

Answer 2

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

Answer 3

JsFiddle

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

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

我希望这可以帮助:)

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

4 个答案: