Question

<input type="checkbox" id="one" onclick="updatebox()"/>1
<input type="checkbox" id="two" onclick="updatebox()"/>2
<input type="checkbox" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>

我有3个复选框和一个文本框。我希望在选中所有复选框时，文本框值将为“123”，如果未检查其中一个，则值应为“12”或“13”或“23”。我不需要逗号，我只需要将它们用作条件值。具体来说，我希望它们仍然按顺序排列，但它们不会按顺序连续检查。我需要这个

的java脚本函数

并且当它们未被选中时，文本框不应包含它们具有的值。比如当所有的都被检查时，你取消选中＃1，值应为“23”。应删除文本中的“1”。因为现在的代码我有：

var one = document.getelementbyID('one');
var textbox = document.getelementbyID('tbtb').value;
if (one.checked)
{
textbox = textbox + "1";
}

所以这里发生的事情是每次选中复选框并同时取消选中时，文本框的值会继续添加另一个“1”，就像“2311111”。请帮助:)

Answer 1

这将有效：

var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var textbox = document.getElementById('tbtb');

function updatebox(){
    var str = "";
    if(one.checked)
      str+="1";
  if(two.checked)
      str+="2";
  if(three.checked)
      str+="3";
  textbox.value = str;
}

<input type="checkbox" class="chk" id="one" onclick="updatebox()"/>1
<input type="checkbox" class="chk" id="two" onclick="updatebox()"/>2
<input type="checkbox" class="chk" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>

Answer 2

请试试这个：

    function updatebox()
    {
    var textbox = $('#tbtb').val();;


    if($('#one').prop('checked')) {
        $("#tbtb").val(textbox + "1");
    }

    if($('#two').prop('checked')) {
        $("#tbtb").val(textbox + "1");
    }

    if($('#three').prop('checked')) {
        $("#tbtb").val(textbox + "1");
    }

    }

和HTML部分是：

<input type="checkbox" id="one" onclick="updatebox()"/>1
<input type="checkbox" id="two" onclick="updatebox()"/>2
<input type="checkbox" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>

Answer 3

试试这个。

JS：

function updatebox() {

    var arrCheckbox = document.querySelectorAll('input[name=common-check]:checked');

     var textBox = document.getElementById("tbtb");
     var strCheck = "";
     for(var i=0;i < arrCheckbox.length;i++){

        strCheck+=arrCheckbox[i].getAttribute('check');
     }
     textBox.value = strCheck
  }

HTML：

<input type="checkbox" name="common-check" id="one" onclick="updatebox()" check="1"/>1
<input type="checkbox" name="common-check" id="two" onclick="updatebox()"  check="2"/>2
<input type="checkbox" name="common-check" id="three" onclick="updatebox()" check="3"/>3
<input type="text" id="tbtb"/>

以下是Plunker

Answer 4

试试这个

<强>的javascript

function updatebox()
    {
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');
        var textbox = document.getElementById('tbtb');

            var str = "";
            if(one.checked)
                str+=one.value;
            if(two.checked)
                str+=two.value;
            if(three.checked)
                str+=three.value;
          textbox.value = str;
    }

<强> HTML

<input type="checkbox"  value="1" id="one" onclick="updatebox()"/>1
<input type="checkbox" value="2" id="two" onclick="updatebox()"/>2
<input type="checkbox" value="3" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>

在选中复选框时更新文本框的文本

4 个答案: