在文本输入更改文本框边框颜色

时间:2014-03-01 08:26:14

标签: javascript jquery html css

我有checkbox,当checkbox 检查时,附近的textbox 边框颜色应变为绿色,如果是取消选中 textbox 边框颜色应为红色。 Jquery代码:

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

fiddle

我已完成上述部分,我需要的是以下内容:

如果textbox为空,则其边框颜色应为红色,如果输入文字,则应更改为绿色。

1 个答案:

答案 0 :(得分:1)

这是因为你忘了在你的小提琴中加入jQuery。

jQuery标签中选择Frameworks and Extensions,它应该有效。

<强> Updated Fiddle


编辑:根据您的评论,您需要使用:

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
}).change();

$('#item_availability1').on('keyup', function () {
 if ($(this).val().length > 0) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

<强> Updated Fiddle