javascript - 使用 jquery 显示基于复选框列表项的隐藏文本框

Question

我有一个 list 框和一个文本框。第一次加载时不显示文本框。如果我在 list 框中选中其他选项，它将显示。这如何使用 jquery 完成？

下面是我的html代码:

<table>
    <tr>
        <td>
            <input name="Offices[0].ID" id="Offices_0__ID" type="hidden" value="Singapore">
            <input name="Offices[0].Name" id="Offices_0__Name" type="hidden" value="Singapore">
            <input name="Offices[0].Checked" id="Offices_0__Checked" type="checkbox" value="true" data-val-required="The Checked field is required." data-val="true">
            <input name="Offices[0].Checked" type="hidden" value="false">
            Singapore
        </td>
    </tr>
    <tr>
        <td>
            <input name="Offices[1].ID" id="Offices_1__ID" type="hidden" value="Kuala Lumpur">
            <input name="Offices[1].Name" id="Offices_1__Name" type="hidden" value="Kuala Lumpur">
            <input name="Offices[1].Checked" id="Offices_1__Checked" type="checkbox" value="true" data-val-required="The Checked field is required." data-val="true">
            <input name="Offices[1].Checked" type="hidden" value="false">
            Kuala Lumpur
        </td>
    </tr>
    <tr>
        <td>
            <input name="Offices[2].ID" id="Offices_2__ID" type="hidden" value="Other">
            <input name="Offices[2].Name" id="Offices_2__Name" type="hidden" value="Other">
            <input name="Offices[2].Checked" id="Offices_2__Checked" type="checkbox" value="true" data-val-required="The Checked field is required." data-val="true">
            <input name="Offices[2].Checked" type="hidden" value="false">
            Other
        </td>
    </tr>
</table>

注意:检查列表框可以根据数据库中的办公室数量增长。

这是我到目前为止所做的:

$(document).ready(initialize);
function initialize() {
    $("input#otheroffice").hide();
    $(":checkbox").click(showHideOtherOffice);
}

function showHideOtherOffice() {
    if ($("input#Offices_item_Checked").is(':checked')) { <-- I don't know how to get Other's checkbox id 
        $("input#otheroffice").show();
    }
    else {
        $("input#otheroffice").hide();
    }
}

Answer 1

这是一个简单的示例，可以让您开始使用:

$(':checkbox[name=office]').on('change', function() {
    if( $(':checkbox[value=other]').is(':checked') ) {
        $('span.other-txt').removeClass( 'hide' );
    } else {
        $('span.other-txt').addClass( 'hide' );
    }
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Office:<br>
<input type="checkbox" name="office" value="singapore"> Singapore<br>
<input type="checkbox" name="office" value="kuala lampur"> Kuala Lampur<br>
<input type="checkbox" name="office" value="other"> Other <br>
<span class="other-txt hide">
  <input type="textbox" name="Other_Text"/>
</span>