Question

HTML：

<form>
    <input type="text" id="target" placeholder="example.com">
    <input type="checkbox" name="http" id="http" value="http"> http://
</form>

<div id="possible-targets">
    <h4>Possible matches: </h4>
</div>

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();
        }
    });
});

这是一个JSFiddle：http://jsfiddle.net/h2Uw4/

现在，当我开始输入文本输入字段时，我可以看到possible-targets div中的实时更改，但是当我单击http://复选框时，它仍然需要至少输入一个字符在文本输入字段中进行实时更改并添加另一个可能的目标。

我尝试在keyup()（文字输入）和#target（复选框）上使用#http，但它没有效果：

$('#target, #http').keyup()

Answer 1

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

示例代码

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

DEMO

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

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

DEMO 2

Answer 2

试试这个

  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>');
        }
    });

});

Answer 3

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

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();
    }

}

updated fiddle

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

3 个答案: