jQuery复选框多选赋值给文本框的方法
在前端开发中,我们经常需要将用户在复选框中选择的多个值,赋值到一个文本框中进行显示。这篇文章将介绍如何使用jQuery来实现这个功能。
准备工作
首先,在HTML中先创建一个多选的复选框列表和一个用于显示已选择选项的文本框:
------- ------ --------------- ------------- ---------- --- -------- ------- ------ --------------- ------------- ---------- --- -------- ------- ------ --------------- ------------- ---------- --- -------- ------ ----------- ----------- ---------
实现方法
接下来使用jQuery来获取用户选择的值,并将它们赋值给文本框。
------------ - ------------------------------------------ - --- ------ - --- ------------------------------------------------- - --------------------------- --- ------------------------------- ---- --- ---
代码解释:
$(function(){})
:等同于$(document).ready(function(){})
,表示当页面加载完成后执行的代码。$('input[name="option"]').click()
:当任意一个复选框被点击时执行的函数。$(':checked')
:选中所有被勾选的复选框。$(this).val()
:获取当前勾选的复选框的值。values.push()
:将获取到的值添加到数组中。$('#result').val()
:将拼接后的字符串赋值给文本框。
示例代码
完整的示例代码如下:
--------- ----- ------ ------ ----- ---------------- ----------------------------------- ------- ----------------------------------------------------------- ------- ------ ------- ------ --------------- ------------- ---------- --- -------- ------- ------ --------------- ------------- ---------- --- -------- ------- ------ --------------- ------------- ---------- --- -------- ------ ----------- ----------- --------- -------- ------------ - ------------------------------------------ - --- ------ - --- ------------------------------------------------- - --------------------------- --- ------------------------------- ---- --- --- --------- ------- -------
总结
以上就是使用jQuery实现将多个复选框的值赋值给文本框的方法,使用起来简单便捷。同时,在实际开发中也可以根据需求进行相应的修改和扩展,例如改变分隔符、限制可选项的数量等。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/270