【问题标题】:Change character used for separation of form input fields with same name identifier?更改用于分隔具有相同名称标识符的表单输入字段的字符?
【发布时间】:2019-12-02 17:58:39
【问题描述】:

我有一个表单,里面有一堆这样的复选框:

<input type="checkbox" name="input1" value="A, and B"/>A, and B
<input type="checkbox" name="input1" value="C"/>C

我还有一些使用 JSTL 填充已选择字段的 JQuery 代码,如下所示:

$('input[name="input1"]').val("${form_inputs}".split(','));

问题是因为值“A, and B”包含逗号,jquery 正在拆分并且设置复选框选中状态错误。

我已经尝试添加更多逗号,以便可以在“,”处拆分,但它似乎不想工作。

有没有办法将逗号分隔符更改为不同的字符?

【问题讨论】:

  • 您能否提供一个您尝试拆分的示例对象${form_inputs}?
  • 为什么你的值需要包含逗号的字符串?您只有在提交表单并检查该值后才能看到该值。所以你可以随意命名这个值,因为你可以通过它的名字知道它是哪个复选框。
  • 我同意@Shilly,如果可能的话,我们会建议你改变价值
  • 我得到的值来自数据库,我不能删除逗号。此外,如果表单无效/正确完成,则 ${form_inputs} 将是之前提交此表单的输入。我需要重新发送表单值,这样用户就不需要再次填写整个表单。
  • 当您尝试拆分${form_inputs} 时,您能否确认您得到了这种对象['A, and B', 'C']?或者只是字符串'A, and B, C'?如果您不知道,您可以使用开发工具轻松调试此变量

标签: javascript jquery html forms checkbox


【解决方案1】:

欢迎来到 SO。根据jQuery documentation,您不能设置复选框值,只能应用属性checked。因此,在这种情况下,您必须使用这种方法设置值:

$('input[name="input1"][value="A, and B"]').prop('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="input1" value="A, and B"/>A, and B
<input type="checkbox" name="input1" value="C"/>C

更新:

const res = 'A, and B, C';
const sp = res.split(',');
let a = [];
	sp.forEach(el => {
		if(el.trim().length > 1){
			a[a.length-1] = a[a.length-1] + ', ' + el.trim();
		}else{
			a.push(el.trim());
		}
	});

a.forEach(function(el){
	$('input[name="input1"][value="'+el+'"]').prop('checked', true);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="input1" value="A, and B"/>A, and B
<input type="checkbox" name="input1" value="C"/>C

我已准备好符合您要求的更新答案,但您必须明白这是一个明显的技巧。我强烈建议您重新设计功能以从变量中获取正确的数组。

【讨论】:

  • 感谢您的欢迎。我不知道为什么,但 .val 似乎在 atm 工作,具有不包含逗号的值的复选框被正确填充。但我绝对同意这是一种更好的方法,并且会改为这种方法。
猜你喜欢
  • 2011-11-20
  • 1970-01-01
  • 2017-11-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-08
  • 1970-01-01
相关资源
最近更新 更多