Question

我正在尝试这段代码：

<script type="text/javascript">
$(document).ready(function () {
$('#individual,#company').hide();

$('input[name=radios]:radio:checked').change(function() {
    $('#individual').toggle(this.selectedIndex === 0);
    $('#company').toggle(this.selectedIndex === 1);
});

});
</script>


<div class="radio-toolbar">
    <input type="radio"  name="radios"> 
    <input type="radio"  name="radios"> 
</div>

<div id="x">
    <form method="post" id="customForm" action="">
        <div id="individual">
            <input name="individual" type="text" />
        </div>
        <div id="company"> 
            <input name="company" type="text" />
        </div>
    </form>
</div>

基本上我只想显示一个输入字段。如果我选择第一个无线电btn，那么，我想显示div个人。如果我选择第二台收音机，应该显示公司内容。

感谢

demo here

Answer 1

我会重写脚本，以便收音机具有不同的值，并使用该值作为触发器而不是=== 0/1构造..

<script type="text/javascript">
$(document).ready(function () {
$('#individual,#company').hide();

$("input[name='radios']").change(function() {
    switch ($(this).val()) {
      case 'ind':
          $('#individual').show();
          $('#company').hide();
      break;
      case 'comp':
          $('#individual').hide();
          $('#company').show();
      break;
    }
});

});
</script>


<div class="radio-toolbar">
    <input type="radio"  name="radios" value="ind"> 
    <input type="radio"  name="radios" value="comp"> 
</div>

<div id="x">
    <form method="post" id="customForm" action="">
        <div id="individual">
            <input name="individual" type="text" />
        </div>
        <div id="company"> 
            <input name="company" type="text" />
        </div>
    </form>
</div>

Answer 2

只是为输入添加了值属性

 <div class="radio-toolbar">
    <input type="radio" name="radios" value="i"> 
    <input type="radio" name="radios" value="c"> 
</div>

<div id="x">
    <form method="post" id="customForm" action="">
        <div id="individual">
            <input name="individual" type="text" />
        </div>
        <div id="company"> 
            <input name="company" type="text" />
        </div>
    </form>
</div>

...更改了选择器，并与上述值进行比较，因为 selectedIndex 属性在单选按钮中不存在。

$(document).ready(function () {
    $('#individual,#company').hide();

    $('input[name=radios]').change(function() {
      $('#individual').toggle($(this).val() === 'i');
      $('#company').toggle($(this).val() === 'c');
    });
});

Answer 3

您可以保持简单，并使用单选按钮触发更改。

<script type="text/javascript">
$(document).ready(function () {
    $('#individual').add('#company').hide();
});
</script>
<div class="radio-toolbar">
    <input type="radio" name="radios" onclick="$('#individual').show();$('#company').hide();"> Individual
    <input type="radio" name="radios" onclick="$('#company').show();$('#individual').hide();"> Company
</div>

...

切换输入字段

3 个答案: