[英]Jquery: append text into input
在單選檢查后嘗試將文本追加到輸入中。 任何想法? http://plnkr.co/edit/HvEBQa2pF43QfiNuFrkT?p=preview
$("#opt1").click(function(){
if ($(this).is(":checked")) {
$("#result").append("Option1 is checked");
}
});
您需要使用.val()
回調函數在輸入元素中附加值:
$("#opt1").click(function(){
if ($(this).is(":checked"))
$("#result").val(function(i,o){
return o +"Option1 is checked";
});
});
$("#opt1").click(function(){
if ($(this).is(":checked")) {
$("#result").val("Option1 is checked");
}
});
append()
用於向該元素添加另一個元素。 您要做的是設置該input
元素的值,因此請改用.val()
。
change
事件 val()
設置文本框的值 parent()
和text()
使代碼動態化,而不是分別在每個單選按鈕上綁定事件。 碼:
// When the radio button state changes
$(":radio").change(function () {
// Get the text associated with selected radio and set it
// as value of the textbox
$("#result").val($(this).parent().text().trim() + " is checked");
});
$(document).ready(function() { $(":radio").change(function() { $("#result").val($(this).parent().text().trim() + " is checked"); }); });
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <div class="col-lg-12"> <label class="radio-inline"> <input id="opt1" type="radio" name="optradio">Option1 </label> <label class="radio-inline"> <input id="opt2" type="radio" name="optradio">Option2 </label> <label class="radio-inline"> <input id="opt3" type="radio" name="optradio">Option3 </label> </div> <div class="col-lg-12"> <input id="result" type="text" class="form-control" value="" autocomplete="off" disabled/> </div>
代替.append()
嘗試使用.val()
如下所示:
$("#opt2").click(function(){
if ($(this).is(":checked")) {
$("#result").val("Option2 is checked");
}
});
不過,在這種情況下,實際上不需要使用.is(":checked")
。 您可以使用。
$("#opt2").click(function(){
$("#result").val("Option2 is checked");
});
$(document).ready(function () {
$("#opt1").click(function () {
if ($(this).is(":checked")) {
$("#result").val("Option1 is checked");
}
});
$("#opt2").click(function () {
if ($(this).is(":checked")) {
$("#result").val("option 2 is checked");
}
});
});
將文本附加到輸入的正確方法。 首先,您必須獲取輸入的現有值並將其與新值連接起來,即
$("#opt1").click(function(){
if ($(this).is(":checked")) {
$('#result').val($('#result').val() + 'Option1 is checked')
}
});
到目前為止,其他答案已經解決了該問題。 我的帖子只是向您展示,只要稍作更改,您就可以減少代碼行數
HTML更改
// Added an attribute data-text which will be captured on checking radio button
<div class="col-lg-12">
<label class="radio-inline">
<input id="opt1" type="radio" data-text="Option 1" name="optradio">Option1
</label>
<label class="radio-inline">
<input id="opt2" type="radio" data-text="Option 2" name="optradio">Option2
</label>
<label class="radio-inline">
<input id="opt3" type="radio" data-text="Option 3" name="optradio">Option3
</label>
</div>
<div class="col-lg-12">
<input id="result" type="text" class="form-control" value="" autocomplete="off" disabled/>
</div>
JS
// fired if there is a change in inputs with same name
$('input[name=optradio]').change(function(){
// get the data-text attribute of the checked radio button
var _getId = $('input[name=optradio]:checked').attr('data-text');
// Update the result input with this value
$("#result").val(_getId +" is checked")
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.