Question

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

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

我的问题是，这是合法的吗？

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

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

Answer 1

您可以使用HTML5 data-*属性：

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

var val = $('input:checkbox').data('value')

Answer 2

除此之外，您可以使用jQuery的{{3}}：

$(':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'

Answer 3

value元素的input:checkbox可以是任何字符串，因此JSON对象完全有效。您必须确保它是一个正确编码的JSON对象（" for quoting strings, not '）并且它也正确地被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'
}

Answer 4

您打算如何将此邮寄到服务器？

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

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

Answer 5

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

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

所以，合法存储此字符串

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

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

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

（键应该有双引号）

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

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

5 个答案: