Question

我正在尝试将复选框链接到文本输入，以便更新输入字段中的值。我的问题是如何在勾选复选框时相应地更新值。例如，我希望有一个文本说明状态是＆＃34;待定＆＃34; （选中未选中的复选框），勾选该框后，将值更新为＆＃34;已完成＆＃34;并可能将文本输入突出显示为绿色。

图片：

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来运行某种输入验证？

希望得到一些帮助。

谢谢。

Answer 1

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

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

编辑（绿色占位符）： -

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

Answer 2

尝试此操作：将change事件绑定到复选框，并按照复选框选中状态放置占位符。

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

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

  });
});

Answer 3

现场演示： 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;
}

Answer 4

看看这个。工作示例：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>

JS

$("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;
}

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

4 个答案: