将复选框链接到文本输入并更新其字段

我想将复选框链接到文本输入以便更新输入字段内的值。我的问题是如何勾选复选框时相应的值。例如，我希望文本陈述状态为“待定”（复选框未勾选），一旦勾选框，将值更新为“已完成”，并可能将文本输入突出显示为绿色。将复选框链接到文本输入并更新其字段

图片：

enter image description here

代码：

<div class="status-updates"> 
     <label class="radio" for="status-updates"> 
      <input type="checkbox" name="status" id="statuses"> 
     </label> 
     <input type="text" name="pending-completed" id="pending-completed" class="pending-completed" placeholder="Pending"> 
    </div>

我需要某种形式的jQuery的运行某种输入验证？

希望对此有所帮助。

谢谢。

来源

2014-09-11 Jeiman

试试下面的jQuery代码（绑定.change()事件复选框）： -

$('#statuses').change(function(){ 
    if($(this).is(':checked')) 
    { 
    $("#pending-completed").attr('placeholder','Completed') 
    } 
    else 
    { 
    $("#pending-completed").attr('placeholder','Pending') 
    } 
});

EDIT（占位符与绿色）： -

的Jquery：

$('#statuses').change(function(){ 
    if($(this).is(':checked')) 
    { 
    $("#pending-completed").attr('placeholder','Completed').addClass('green-class') 
    } 
    else 
    { 
    $("#pending-completed").attr('placeholder','Pending').removeClass('green-class') 
    } 
});

CSS ：

.green-class::-webkit-input-placeholder { 
    color: green; 
}

DEMO

来源

2014-09-11 07:32:29

感谢您的帮助。有没有更新文本输入内部文本的方法，而不是通过占位符？可能通过“内容”来做到这一点？ – Jeiman 2014-09-11 07:40:09

@Jeiman ...是的，你可以使用文本框的值，而不是占位符。对于迟到的反应，有一些互联网连接问题 – 2014-09-11 07:50:15

但我需要在jQuery中声明文本框的值吗？否则，它将是一个空的输入字段，对吗？ – Jeiman 2014-09-11 07:56:18

试试这个：绑定change事件复选框，并把占位按选中复选框的状态。

$(function(){ 
$('#statuses').change(function(){ 
    var placeholder = $(this).is(':checked')?"Completed":"Pending"; 

    $("#pending-completed").attr('placeholder',placeholder); 

    }); 
});

来源

2014-09-11 07:34:58

现场演示：http://jsfiddle.net/don/qaxow1jz/

的jQuery：

$('input[name=status]').change(function() { 
    var inputText = 'input[name=pending-completed]'; 
    if($(this).is(':checked')) { 
     $(inputText).attr('placeholder', 'Completed').addClass('highlight'); 
    } else { 
     $(inputText).attr('placeholder', 'Pending').removeClass('highlight'); 
    } 
});

HTML：

<div class="status-updates"> 
    <label class="radio" for="status-updates"> 
     <input type="checkbox" name="status" id="statuses"> 
    </label> 
    <input type="text" name="pending-completed" id="pending-completed" class="pending-completed" placeholder="Pending"> 
</div>

CSS：

input.highlight[name=pending-completed]::-webkit-input-placeholder { 
    color: green; 
} 
input.highlight[name=pending-completed]:-moz-placeholder { 
    color: green; 
} 
input.highlight[name=pending-completed]::-moz-placeholder { 
    color: green; 
} 
input.highlight[name=pending-completed]:-ms-input-placeholder { 
    color: green; 
}

来源

2014-09-11 07:40:55

看一看这一点。工作示例：http://jsfiddle.net/gmwzzL10/

HTML

<div class="status-updates"> 
     <label class="radio" for="status-updates"> 
      <input type="checkbox" name="status" id="statuses" class="checkbox_status"> 
     </label> 
     <input type="text" name="pending-completed" id="pending-completed" class="pending-completed" placeholder="Pending"> 
    </div>

$("document").ready(function(){ 

    $(".checkbox_status").click(function(){ 
     var inputBox = $(this).closest(".status-updates").find(".pending-completed"); 

     if($(this).is(':checked')){ 
      inputBox.attr("placeholder","Completed").addClass("make-green"); 
     } 
     else{ 
      inputBox.attr("placeholder","Pending").removeClass("make-green"); 
     } 
    }) 

})

CSS

.make-green{ 
    border: 1px solid green; 
}

来源

2014-09-11 07:52:54

将复选框链接到文本输入并更新其字段

回答

相关问题