Javascript jQuery使用keyup（）检测两个元素上的更改

HTML:

---

创建函数并将其传递给事件处理程序

示例代码

根据@DavidThomas的评论，您也可以使用

var yourFunc = function () {
       //Your code
};
$('#target').keyup(yourFunc);
$('#http').change(yourFunc); 

试试这个

$('#target, #http').on('change keyup', yourFunc)

var目标值；
$（窗口）。加载（函数（）{
$（'#target'）.keyup（函数（）{
target_value=$（'#target'）.val（）；
如果（目标值=“”）{
$（“#目标匹配”）.remove（）；
}else if（$（'#目标匹配'）。长度==0）{
$（“#可能的目标”）。追加（“”+目标值+“”）；
}else if（$（“#目标匹配”）.length！=0）{
$（“#目标匹配”）.html（目标值）；
}
if（$（'#http'）.prop（'checked'））{
如果（$（'#target-match-h'）。长度==0）{
$（“#可能的目标”）.append（'http://'+target_value+''）；
}否则{
$（'#target-match-h'）.html（'http://'+target_值）；
}
}否则{
$（'#target-match-h'）。删除（）；
}
});
$（'#http'）。单击（函数（）{
if（$（'#target'）.val（）！=“”）
如果（this.checked==true）{
$（'#可能的目标'）.html（'可能的匹配项：http://'+target_value+''）；
}否则{
$（'#可能的目标'）.html（'可能的匹配：'+target_value+''）；
}
});
});

当复选框的值更改时，您必须执行回调功能。 请将js更新为：

  var target_value;

$(window).load( function() {

    $('#target').keyup(function() {

        target_value = $('#target').val();

        if(target_value == '') {
            $('#target-match').remove();
        } else if($('#target-match').length == 0) {
            $('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
        } else if($('#target-match').length != 0) {
            $('#target-match').html(target_value);
        }

        if($('#http').prop('checked')) {

            if($('#target-match-h').length == 0) {
                $('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
            } else {
                $('#target-match-h').html('http://' + target_value);
            }

        } else {
            $('#target-match-h').remove();
        }

    });
    $('#http').click(function(){
        if ($('#target').val() !== "")
        if (this.checked === true) {
            $('#possible-targets').html('<h4>Possible matches: </h4><h4><span id="target-match-h">http://' + target_value + '</span></h4>');
        } else {
            $('#possible-targets').html('<h4>Possible matches: </h4><h4><span id="target-match-h">' + target_value + '</span></h4>');
        }
    });

});

var目标值；
$（窗口）。加载（函数（）{
$（'#target'）.keyup（displayMatches）；
$（'#http'）.change（displayMatches）；
});    
函数displayMatches（）{
target_value=$（'#target'）.val（）；
如果（目标值=“”）{
$（“#目标匹配”）.remove（）；
}else if（$（'#目标匹配'）。长度==0）{
$（“#可能的目标”）。追加（“”+目标值+“”）；
}else if（$（“#目标匹配”）.length！=0）{
$（“#目标匹配”）.html（目标值）；
}
if（$（'#http'）.prop（'checked'））{
如果（$（'#target-match-h'）。长度==0）{
$（“#可能的目标”）.append（'http://'+target_value+''）；
}否则{
$（'#target-match-h'）.html（'http://'+target_值）；
}
}否则{
$（'#target-match-h'）。删除（）；
}
}   

---

它工作正常，我在chrome上试用过。我建议做一个小改动：。太好了！很好用。谢谢

var yourFunc = function () {
       //Your code
};
$('#target').keyup(yourFunc);
$('#http').change(yourFunc); 

$('#target, #http').on('change keyup', yourFunc)

  var target_value;

$(window).load( function() {

    $('#target').keyup(function() {

        target_value = $('#target').val();

        if(target_value == '') {
            $('#target-match').remove();
        } else if($('#target-match').length == 0) {
            $('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
        } else if($('#target-match').length != 0) {
            $('#target-match').html(target_value);
        }

        if($('#http').prop('checked')) {

            if($('#target-match-h').length == 0) {
                $('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
            } else {
                $('#target-match-h').html('http://' + target_value);
            }

        } else {
            $('#target-match-h').remove();
        }

    });
    $('#http').click(function(){
        if ($('#target').val() !== "")
        if (this.checked === true) {
            $('#possible-targets').html('<h4>Possible matches: </h4><h4><span id="target-match-h">http://' + target_value + '</span></h4>');
        } else {
            $('#possible-targets').html('<h4>Possible matches: </h4><h4><span id="target-match-h">' + target_value + '</span></h4>');
        }
    });

});

var target_value;

$(window).load( function() {

    $('#target').keyup(displayMatches);
    $('#http').change(displayMatches);

});    
function displayMatches() {

    target_value = $('#target').val();

    if(target_value == '') {
        $('#target-match').remove();
    } else if($('#target-match').length == 0) {
        $('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
    } else if($('#target-match').length != 0) {
        $('#target-match').html(target_value);
    }

    if($('#http').prop('checked')) {

        if($('#target-match-h').length == 0) {
            $('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
        } else {
            $('#target-match-h').html('http://' + target_value);
        }

    } else {
        $('#target-match-h').remove();
    }

}