Question

我想在检查时显示我的复选框值，但我的代码只显示一个值。

例如，如果我选中第一个复选框，它会显示当时的值。如果我选中第二个复选框，那么它的值将显示在前一个值旁边。

我该怎么办？

<script>
function test(item) {
  var result = $('#val').val();
  $('#course').html(result);
} 
</script>

<html>
  <div id="show">
    <span id="course"> </span>
  </div>

  <input type="checkbox" id="val" value="20" onclick="test()" />20
  <br />
  <input type="checkbox" id="val" value="30" onclick="test()" />30
  <br />
  <input type="checkbox" id="val" value="40" onclick="test()" />40
  <br />
</html>

Answer 1

请注意 -

您必须使用唯一ID
我的建议是改用

请参考此，我希望对您有用

$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
  $('#course').append(result);
  
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>

<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />

Answer 2

＆＃13;

  $('input[data-action="data-click"]').on("click", function() {
        if($(this). prop("checked")==true){
            var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
            $('div#show').append(dataDisplay + " ")
        }
        else {
        $("#" + this.value).remove();
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div id="show">
 
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />

＆＃13;

Answer 3

您已为每个复选框指定了相同的ID，因此javascript只找到第一个复选框并显示其值。

您可以将clicked checkbox发送给该功能并获取其值

<div id="show"> 
<span id="course"> </span>
</div>

<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40



<script>
 function test(item) {
   var result = $(item).val();
   $('#course').html(result);
 }
</script>

Answer 4

function test(element) {
  var result = $(element).val();
  $('#course').append(result);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
  <span id="course"> </span>
</div>

<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />

更改$（'＃course'）。html（result）; to $（'＃course'）。append（result）;
使用this上下文并获取当前复选框

Answer 5

首先，id属性应该是唯一的，您需要始终对一组元素使用class属性。

用于将单击的元素传递this作为单击处理程序参数。

<script>
  function test(item) {
    document.getElementById('course').innerHTML = item.value;
  }
</script>

<html>
<div id="show">
  <span id="course"> </span>
</div>

<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />

</html>

Answer 6

使用class而不是id并绑定class

的click事件

$('.val').click(function() {
   $("#course").html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>

<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40"  />40
<br />

</html>

Answer 7

试试这个。将项目传递给函数并显示项目的值。我附上了示例代码段。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
    function test(item) {
        var result = item.value;
        $('#course').html(result);
    }
</script>

<html>
<div id="show">
    <span id="course"> </span>
</div>

<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />

</html>

Answer 8

首先，你不应该使用相同的 ID ＆＃34; val＆＃34;对于所有复选框，您有 Classes 。这只是对以前输入的代码的修改，让您知道您不必将整个此对象传递给您的函数，而是可以直接传递 this.value < / p>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
    function test(item) {
        var result = item;
        $('#course').html($('#course').html());
    }
</script>

<html>
<div id="show">
    <span id="course"> </span>
</div>

<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />

</html>

希望这对你有所帮助。

使用JavaScript显示的复选框值

8 个答案: