Question

我正在尝试让输入框可见/不可见，具体取决于是或否选择单选按钮。

我已经为文本输入框所在的每个div分配了一个ID。

<tr>
    <td>Acknowledged within 30 secs</td>
    <td>
        <div class="radio"><input type="radio" value="1" name="greet"> Yes</div>
        <div class="radio"><input type="radio" value="0" name="greet"> No</div>
    </td>
</tr>
<tr>
    <td></td>
    <td>
        <div id="greet-info" class="hidden">
        <input type="text" class="textbox" placeholder="Tell us more" id="greet_more" name="greet_more">
        </div>
    </td>
</tr>


    $("input[name='greet']").change(
    function(){
        if($('input[name=greet]:checked').val()=="0"){
            $('#greet-info').removeClass("hidden");
        }else{
            $('#greet-info').addClass("hidden");
        }

    }
);
$("input[name='menu']").change(
    function(){
        if($('input[name=menu]:checked').val()=="0"){
            $('#menu-info').removeClass("hidden");
        }else{
            $('#menu-info').addClass("hidden");
        }

    }
); 
$("input[name='drinks_menu']").change(
    function(){
        if($('input[name=drinks_menu]:checked').val()=="0"){
            $('#drinks_menu-info').removeClass("hidden");
        }else{
            $('#drinks_menu-info').addClass("hidden");
        }

    }
);

因为我有很多问题，而且它们分布在5页。我需要很多输入框，因此我每次都必须重新编写该功能。我想知道我怎么能这样做所以我只需要编写一个函数？

谢谢！

Answer 1

最简单的是：

function bindInput(selector, id) {
  $(selector).change(
    function(){
        if($(selector + ':checked').val()=="0"){
            $(id).removeClass("hidden");
        }else{
            $(id).addClass("hidden");
        }

    }
  );
}


bindInput("input[name='greet']",'#greet-info')
bindInput("input[name='menu']",'#menu-info')
bindInput("input[name='drinks_menu']",'#drinks_menu-info')

Answer 2

如果您的html在所有元素中遵循相同的结构，那么

$('table input[type="radio"]').change(function(){
    $(this).closest('tr').next().find('div').toggle(this.value == 1 && this.checked)
})

演示：Fiddle

jQuery同样功能多个id

2 个答案: