为复选框javascript指定两个值

Assigning two values to a checkbox javascript

本文关键字：两个 复选框 javascript      更新时间：2023-09-26

我需要从一个复选框返回两个不同的值作为结果。我尝试了一个对象，但结果是未定义的（代码只使用一个值）。

 ' <input type="checkbox" id="cat" value="'+{value1: data.blue, value2: data.red} +'"/>'

result.value1总是未定义的，而result只适用于字符串。

使用javascript/jquery实现这一点的最佳方法是什么。

您可以使用attr添加更多值，例如：

<input type="checkbox" id="cat" data-value1="blue" data-value2="red" value=""/>

使用jQuery获取值，使用：

$("#cat").data("value1");//return 'blue'
$("#cat").data("value2");//return 'red'

结果：https://jsfiddle.net/cmedina/a0ya5bwp/

为什么不创建一个带分隔符的字符串类似于value1''t value2

你只需要搜索这个分隔符并剪切字符串就可以得到你的2个差值？

您可以将对象字符串化，并将该值作为数据属性放在输入上，在输入更改处理程序中，将字符串解析为JSON。

HTML

<input type="checkbox" id="cat" name="cat">
<label for="cat">Cat</label>

Javascript

var input = document.getElementById('cat');
var testValue = {value1: 'blue', value2: 'red'};
input.setAttribute('data-value',JSON.stringify(testValue));
input.addEventListener('change', function(event) {
  var inputValue = JSON.parse(event.target.getAttribute('data-value'));
  console.log(inputValue);
});

演示：JSFiddle

看起来有拼写错误：vaule1应该是value1

相关文章：