0

我有两个名为 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>
4

2 回答 2

0

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

   $('.checkbox1').change(function() {
        if (this.checked) {
            $('#hidden_div').fadeIn('fast');
            //Add more logic
        }
        else
        {
            //more logic
        }
    });
于 2013-07-31T16:21:20.467 回答
0

您应该从 中获取选中的值，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/

于 2013-07-31T16:25:42.560 回答