將複選框鏈接到文本輸入並更新其字段

我想將複選框鏈接到文本輸入以便更新輸入字段內的值。我的問題是如何勾選複選框時相應的值。例如，我希望文本陳述狀態爲「待定」（複選框未勾選），一旦勾選框，將值更新爲「已完成」，並可能將文本輸入突出顯示爲綠色。將複選框鏈接到文本輸入並更新其字段

圖片：

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

將複選框鏈接到文本輸入並更新其字段

回答

相關問題