如何存储选中的框API值并显示在<span> HTML元素中

Question

我需要协助存储复选框API值。我有多个复选框，当复选框被选中时，我可以在html中显示API值。但是，如何存储已选中复选框的初始值并在跨度中显示它？

我目前获得“on”值而不是API初始值。

例如。我想要的价值是存储在API中的“Faculty Lecture”

以下是我的代码：

＆＃13;

＆＃13;

//store checkbox values
$('#myCheck1').on('change', function() {
  $('.results').html(this.checked ? this.value : '');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="myCheck1" name="checks" class="round">

<span id="eventTitle" class="results"></span>https://stackoverflow.com/questions/ask#

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为您希望将值附加到复选框。 您应该使用<label>代替<span>输入复选框，以便最初显示其值。

实施例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" id="myCheck1" name="checks" class="round">
 <label for="myCheck1">Faculty Lecture</label>

您可以在jquery中获取复选框的标签，如

$("label[for='myCheck1']")

要获取标签文本，您可以使用以下内容：

$("label[for='myCheck1']").text()

以下应该是你的html和jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<input type="checkbox" id="myCheck1" name="checks" class="round">
 <label for="myCheck1">Faculty Lecture</label>
 <span class='results'></span>

<script>

//store checkbox values
$('#myCheck1').on('change', function() {
var lb=$("label[for='myCheck1']").text();
  $('.results').html(lb);
});

</script>

Answer 2

使用复选框value属性存储复选框的值，例如

<input type="checkbox" id="myCheck1" name="checks" class="round" value="Faculty Lecture">

那样this.value会返回"Faculty Lecture"

此外，通过更改：

，在选择器中使用该类而不是元素的id

$('#myCheck1').on('change', function() { ....

要：

$('.round').on('change', function() { .....