Question

我有一个文本字段，其中包含从数据库填充的图像值。我需要一个复选框，在选中时清除值，并在未选中时恢复值。

<input type="text" value="/images/sampleimage.jpg" />
Remove this image <input type="checkbox" name="remove">

Answer 1

将HTML更改为：

<input type="text" value="/images/sampleimage.jpg" class="remove"/>

Remove this image <input type="checkbox" name="remove" class="handler">

并且js： jquery

$('.handler').click(function() {
      $('.remove').val("Replace by new value");
});

Answer 2

IE7不会喜欢这个，而且使用jQuery会更容易。

<input id="A" type="text" value="/images/sampleimage.jpg" />
Remove this image <input id="CHA" onclick="swapOut(this,'A')" type="checkbox" name="remove">

JS：

function swapOut(element,id) {
    target = document.getElementById(id)
        if(element.checked) {
             element.setAttribute('rel',target.value)
              target.value=''
        }
    else {
        target.value  = element.getAttribute('rel')
    }

}

Answer 3

假设您的复选框的ID为#check，输入的输入为#input，

$('#check').change(function(){
  if($(this).is(':checked')){
     $('#input').val(,$('#input').data('previous_value'));
  } else {
     $('#input').data('previous_value',$('#input').val());  
  }
};

这会在输入中添加一个名为“data-previous_value”的属性，在取消选中该复选框时保存该值，并在选中时将其检索到输入值。

Answer 4

这是一个javascript解决方案（不需要jQuery）

example jsfiddle

HTML：

<input id="imgInput" type="text" value="/images/sampleimage.jpg" />
Remove this image <input type="checkbox" id="remove" name="remove">

JS：

var imgInput = document.getElementById('imgInput'),
remove = document.getElementById('remove'),
val = imgInput.value;

remove.onchange = function() {
    if (this.checked) {
        imgInput.value = "";
    } else {
        imgInput.value = val;
    }
}

如果选中复选框，则清除文本输入值如果使用javascript取消选中则恢复值

4 个答案: