5

我有一个 HTML 表，如果用户想对该行执行特定操作，他们将从该表中检查该行。

而不是创建从行中挑选关键数据的逻辑，我希望将关键值存储在输入复选框的 value 属性中。

我的问题是，这是否合法：

<input type="checkbox" value="{'id': 100, 'postcode': 'WA8 6QF'}" />

这样，我可以使用 jQuery 选择器来挑选选中的框并循环它们，使用值 JSON 对象中的项目执行操作。

4

5 回答 5

13

您可以使用 HTML5data-*属性：

<input type="checkbox" data-value='{"id": 100, "postcode": "WA8 6QF"}' />

var val = $('input:checkbox').data('value')
于 2012-07-06T19:39:31.527 回答
2

取而代之的是，您可以使用.data() of jQuery：

$(':checkbox').data({'id': 100, 'postcode': 'WA8 6QF'});

标记等价物是这样的：

<input type="checkbox" data-id="100" data-postcode="'WA8 6QF'" />

然后像这样检索：

$(':checkbox').data('id')   //100
$(':checkbox').data('postcode') //'WA8 6QF'
于 2012-07-06T19:40:31.577 回答
1

value元素的theinput:checkbox可以是任何字符串，因此 JSON 对象是完全有效的。您必须确保它是一个正确编码的 JSON 对象（"用于引用字符串，而不是'），并且它也是正确的 HTML 转义。

您提供的示例是无效的 JSON：

<input type="checkbox" value="{'id': 100, 'postcode': 'WA8 6QF'}" />

相反，您应该拥有：

<input type="checkbox" value="{&quot;id&quot;:100,&quot;postcode&quot;:&quot;WA8 6QF&quot;}" />

正是由于这些类型的编码问题，大多数人会阻止这种使用。它本身并没有什么问题，但是很容易犯不被注意的错误。

综上所述，如果你只是想将数据与元素关联起来，jQuery 的data方法更容易使用，而且你不必担心编码。

此外，如果您从服务器传递信息。jQuery 的data方法将从所有[data-*]属性中提取信息：

<input id="example" type="checkbox" data-id="100" data-postcode="WA8 6QF" value="...some value..." />
<script>//ideally in an external .js file rather than inline
    var exampleData = $('#example').data();
</script>

exampleData将会：

{
    id: 100, //will even be nicely cast to a Number
    postcode: 'WA8 6QF'
}
于 2012-07-06T19:43:46.327 回答
0

您打算如何将其发布到服务器？

如果通过正常的 _POST 提交，您可能只需要配对输入隐藏标签

<input type="checkbox" name="c1" />
<input type="hidden" name="d1" value="{'id': 100, 'postcode': 'WA8 6QF'}" />
于 2012-07-06T19:42:20.857 回答
0

将 JSON 对象存储为复选框输入的值属性是否合法？

"{'id': 100, 'postcode': 'WA8 6QF'}"毕竟是一个字符串。

所以，存储这个字符串是合法的

但是，由于它不是有效的 json，您以后可能无法使用它。

所以解决这个问题，你应该这样做，

<input type="checkbox" value='{"id": 100, "postcode": "WA8 6QF"}' />

（键应该有双引号）

所以，你可以，但你不应该。使用data其他人解释的属性。

于 2012-07-06T19:45:42.613 回答