切換輸入字段

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個人。 如果我選擇第二台收音機，應顯示公司內容。

謝謝

在這里演示

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>

...