Question

我有两个名为hidden_div和hidden_divX的隐藏div。目标是在单击相应的复选框时显示每个。我有两个独立的功能。两者都完全相同。第一个隐藏的div工作正常。第二个汽车出现。有什么想法或建议吗？

JS：

function doInput(obj){
    var checkboxs = $("input[type=checkbox]:checked"); 
    var i =0, box;
    $('#hidden_div').fadeOut('fast');

    while(box = checkboxs[i++]){
        if(!box.checked)continue;
        $('#hidden_div').fadeIn('fast');
        break;
    }
}

function doInputs(obj){
    var checkboxs = $("input[type=checkbox]:checked"); 
    var i =0, box;
    $('#hidden_divX').fadeOut('fast');

    while(box = checkboxs[i++]){
        if(!box.checked)continue;
        $('#hidden_divX').fadeIn('fast');
        break;
    }
}

这是我目前的html：

<div id="ticket_hidden" style="text-align: center; clear:both;">
    <div id="visible_div" style="float: left;">
        <input type="checkbox" name="escalated" value="Yes" onclick="doInput(this)" tabindex="18">Escalate&nbsp;&nbsp;&nbsp;
    </div>
    <div id="hidden_div" style="float: left;">
        <input type="text" id="escalated_to" name="escalated_to" maxlength="100" style="width:200px; height:18px;" tabindex="19" placeholder="Escalated To">
    </div>
    <br />
    <div id="visible_divX" style="float: left;">
        <input type="checkbox" name="escalated" value="Yes" onclick="doInputs(this)" tabindex="20">Send Email&nbsp;&nbsp;&nbsp;
    </div>
    <div id="hidden_divX" style="float: left;">
        <input type="text" id="escalated_to" name="escalated_to" maxlength="100" style="width:200px; height:18px;" tabindex="21" placeholder="Email To">
    </div>
</div>

Answer 1

为每个复选框添加一个类（比如checkbox1＆amp; checkbox2）＆amp;以下面的方式处理事件而不是使用onclick ..例如，处理第一个复选框单击

   $('.checkbox1').change(function() {
        if (this.checked) {
            $('#hidden_div').fadeIn('fast');
            //Add more logic
        }
        else
        {
            //more logic
        }
    });

Answer 2

自从obj传递this后，您应该从doInputs(this)获取选中的值。

function doInput(obj) {
    if ($(obj).is(':checked')) {
        $('#hidden_div').fadeIn('fast');
    } else {
        $('#hidden_div').fadeOut('fast');
    }
}

function doInputs(obj) {
    if ($(obj).is(':checked')) {
        $('#hidden_divX').fadeIn('fast');
    } else {
        $('#hidden_divX').fadeOut('fast');
    }
}

jsFiddle：http://jsfiddle.net/dV2Kb/1/

为什么隐藏的div会自动出现？

2 个答案: