Javascript 显示复选框值与值中的空格中断

Javascript Show Checkbox Values Breaks With A Space In Value

本文关键字：空格 中断 显示 复选框 Javascript      更新时间：2023-09-26

我有以下代码：

<input type="checkbox" name="module" value="module1" />
<input type="checkbox" name="module" value="module2" />
<input type="checkbox" name="module" value="module3" />
<div id="result"></div>

还有Javascript：

$('input[name="module"]').click(function(){ 
if (this.checked) {
var span = "<span id='" + this.value + "'>" + this.value + "<br /></span>";
$("#result").append(span);
}else{
$("#" + this.value).remove();
}
});

所有这些都运作良好。 但是，当我为带有空格的复选框引入值时，它会停止从列表中删除该项目。

http://jsfiddle.net/n1cubk0e/5/

从上面可以看出引入空间时会发生什么。 如何让它与复选框值中的空格一起使用？

提前致谢

根据 id 属性的 HTML5 规范，该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符

试试这个：

$('input[name="module"]').click(function() {
  var id = this.value.replace(/ /g, "");
  if (this.checked) {
    var span = "<span id='" + id + "'>" + this.value + "<br /></span>";
    $("#result").append(span);
  } else {
    $("#" + id).remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="module" value="module 1 1 1" />
<input type="checkbox" name="module" value="module 2 2 2" />
<input type="checkbox" name="module" value="module 3 3 3" />
<div id="result"></div>

在这里摆弄

解决此问题的一种方法是使用不间断空格

<input type="checkbox" name="module" value="module&nbsp;1" />
<input type="checkbox" name="module" value="module&nbsp;2" />
<input type="checkbox" name="module" value="module&nbsp;3" />

小提琴

相关文章：