多個複選框值將在文本框中顯示

這裏是我的代碼：多個複選框值將在文本框中顯示

<body> 
<div align="center"> 
<b>A<input type="checkbox" name="a" id="check" value="a"></b> 
<b>B<input type="checkbox" name="b" id="check" value="a"></b> 
<b>B<input type="checkbox" name="c" id="check" value="c"></b> 
<b>D<input type="checkbox" name="d" id="check" value="d"></b> 
</div> 
<table align="center"> 
<tr> 
<td>Text:</td> 
<td><input type="text" name="text" id="text"></td> 
</tr> 
</table> 
</body>

我想的是：如果被選中（不止一個）複選框（或檢查），其價值將被分配到像複選框「ABCD」或「ACD」或「BD」。對於我寫的jQuery

<script type="text/javascript"> 
$(document).click(function(){ 
if($("#check").attr('checked')){ 
    $("#text").val(("#check").val()); 
} 
}); 
</script>

能夠一次打印一個txtbox價值，但不能把所有選中的值在文本框中一次。我在哪裏出錯？任何投入將讚賞。

來源

2012-07-31 Tirtha

第一你需要改變複選框的ID。它應該是唯一的，不一樣的。然後你可以用一些常見的類名來改變選擇符#check。 – 2012-07-31 08:07:11

我可能沒有正確理解你，但這個小提琴幫助你嗎？ http://jsfiddle.net/XwGJ9/1/

的變化是JavaScript：

var $textInput = $('#text'); 
var $checkBox = $('#checkboxes'); 

$('input').click(function(){ 
    populateTextInput(); 
}); 

function populateTextInput() { 
    // empty text input 
    $textInput.val(''); 

    // print out all checked inputs 
    $checkBox.find('input:checked').each(function() { 
     $textInput.val($textInput.val() + $(this).val()); 
    }); 
}

編輯：更新

來源

2012-07-31 08:07:09

感謝您的回覆，但chkbox未被檢查...它仍然將值分配給文本框，在這方面的任何輸入+ 1個事情 - >如果一個組合（假設「acd」或「cd」被選中）不再重複。任何投入..... – Tirtha 2012-07-31 10:00:53

哦，對不起，我不知道。會做一些改變。 – 2012-07-31 13:24:41

@Vivekanand：看看這個：http://jsfiddle.net/XwGJ9/1/這有幫助嗎？ – 2012-07-31 13:34:16

所以我想你想的值在文本框中一起追加。在這種情況下，請執行以下操作：

<script type="text/javascript"> 
$(document).click(function(){ 
if($("#check").attr('checked')){ 
    var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value. 
    // Load the resulting value into new var textBoxVal. 
    $("#text").val(textBoxVal); // Load the new value into the textbox. 
} 
}); 
</script>

我用原生JS只是爲了讓它更清楚我在做什麼。

來源

2012-07-31 08:08:00 Stegrex

上的任何輸入>假設我選擇a，b，c或b，c複選框，則該值將顯示在另一個文本框中像「蘋果，蜜蜂，柑橘」或「蜜蜂，柑橘」（這裏這些值不是複選框輸入，我必須硬編碼它）......任何想法。 – Tirtha 2012-08-01 07:53:09

曾使用過這樣的事情..可以幫助你

var checkeditems = $('input:checkbox[name="check[]"]:checked') 
          .map(function() { 
           return $(this).val() 
          }) 
          .get() 
          .join(","); 

$("#text").val(checkeditems);

來源

2012-07-31 08:11:22 Dru

使用此代碼

$('.check').click(function(){ 
    $("#text").val(''); 
    $(".check").each(function(){ 
     if($(this).prop('checked')){ 

      $("#text").val($("#text").val()+$(this).val()); 
     } 
    }); 
});

有了這個HTML（使用class而不是id是ABCD）

<div align="center"> 
<b>A<input type="checkbox" name="a" class="check" value="a"></b> 
<b>B<input type="checkbox" name="b" class="check" value="b"></b> 
<b>B<input type="checkbox" name="c" class="check" value="c"></b> 
<b>D<input type="checkbox" name="d" class="check" value="d"></b> 
</div> 
<table align="center"> 
<tr> 
<td>Text:</td> 
<td><input type="text" name="text" id="text"></td> 
</tr> 
</table>

我也鼓勵使用CSS，而不是align="center"

See live, running demo

來源

2012-07-31 08:13:05 Usman

爲您的答覆，但破壞此代碼時顯示「ISO-8859-1」字符編碼錯誤的Thnks +根本不工作這段代碼 – Tirtha 2012-07-31 12:38:27

如果你只是想沒有A，B，C，d的倍數在同一時間，的onclick是每複選框

 var boxes = $("input:checkbox"); 
     boxes.each(function(idx,elem){ 
       elem.onclick=function(event){ 
        var choices = ""; 
        boxes.each(function(idx,elem){ 
         choices += elem.checked ? elem.name:""; 
        }); 
        $('#text').val(choices); 
       } 
     });

來源

2012-07-31 09:49:52

多個複選框值將在文本框中顯示

回答

相關問題