javascript - 切换输入字段

标签 javascript jquery

我正在尝试这段代码:

<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 个体。如果我选择第二个 radio ,应该显示公司内容。

谢谢

演示 here

最佳答案

我会重写脚本,以便 radio 具有不同的值,并使用该值作为触发器,而不是 === 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>

关于javascript - 切换输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8041616/

相关文章:

javascript - 从所有检查值创建字符串 jQuery

javascript - 我怎样才能只选择一个单选按钮?

javascript - JQuery:对话框不会触发自动完成

jquery - 获取表中的td元素

javascript - html中pdf元素的滚动条样式

javascript - 记录 Javascript/React

javascript - 没有提交按钮的单选按钮

javascript - 如何使用 jQuery 或 Javascript 调整某个框的大小而不调整其旁边的框的大小?

javascript - Contenteditable div 不起作用

javascript - 如何以适当的方式获取表标签的td标签