用jquery把复选框checkbox选中的值放入input框中

如图,选中看电影,睡觉,input框显示 看电影,睡觉;如果再取消看电影,则只显示睡觉或者在点击玩,则显示睡觉,玩 新手初学jquery,求指教,最好给代码

1、新建一个html文件,命名为test.html。

2、在test.html文件内,在p标签内,使用input标签创建一个checkbox选项和一个文本框,并且文本框设置默认值。

3、在test.html文件内,给每一个checkbox类型input元素设置name属性,统一设置为ck,主要用于下面通过该name获得input对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“获得input值”。

5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getinput()函数。

6、在js标签中,创建getinput()函数,在函数内,通过“:checked”选择器获得被选中的checkbox对象,使用next()方法获得checkbox相邻的input文本框对象,通过val()方法获得它的值。最后,使用alert()方法输出input的值。

7、在浏览器打开test.html文件,点击按钮,查看结果。

温馨提示:内容为网友见解,仅供参考
第1个回答  2013-11-22
点击复选框的时候用each寻找 checked 属性的,并获取值存在一个变量活数组里面。然后把相应的值付给input,这是思路,你自己先写一下,实在写不出来我再帮你写
第2个回答  推荐于2018-03-05
 <input type="checkbox" name="chkHobby" value="看电影"/>看电影
 <input type="checkbox" name="chkHobby" value="睡觉"/>睡觉
 <input type="checkbox" name="chkHobby" value="玩"/>玩
爱好:<input type="text" id="txtHobby" />

$("input[name='chkHobby']").change(function(){
        var result="";
        $(this+":checked").each(function(){
               result+=$(this).val()+',';
        });
        $("#txtHobby").val(result);    
    });

追问

这个 不行啊,没效果,你试验过了么?

追答

有效果的啊。我测过的

追问

我按你给的写,没有效果

追答

你用的是jquery1.8的啊,我那个是1.72的版本
你把
$(this+":checked").each(function(){
改成:
$("input[name='chkHobby']:checked").each(function(){

追问

可以了,但是能不能把最后一个逗号去掉了阿,这样看上去不好

追答if(result!=""){
    result=result.substring(0,result.lastIndexOf(',')); 
}

把这段代码添加到

   $("#txtHobby").val(result);

前面就可以了。

本回答被提问者和网友采纳
第3个回答  2013-11-22
留下邮箱,给你发几个jquery必学的几个例子,

用jquery把复选框checkbox选中的值放入input框中
1、新建一个html文件,命名为test.html。2、在test.html文件内,在p标签内,使用input标签创建一个checkbox选项和一个文本框,并且文本框设置默认值。3、在test.html文件内,给每一个checkbox类型input元素设置name属性,统一设置为ck,主要用于下面通过该name获得input对象。4、在test.html文件内,使用but...

如何用JQuery实现获取checkbox选中的那一行的input中的值
<input type="button" value="确定"> 2、jquery代码 (function(){ (":button").click(function() { \/\/ 找到选中行的input var ipts = $(":checkbox:checked").parents("tr").find("input:text");\/\/ 遍历input并使用val()方法获取值 str = .map(function() {return $(this).val();}...

如何用jquery将勾中复选框的那一行的数据自动添加到同页面的另一个表 ...
①首先获得选中复选框的那一行或者多行数据,这个用,具体的代码要看你的网站结构通过jquery选择器和each循环都可以获得。("input:checkbox[name='the checkbox name']:checked")...②在each循环中,把获取到的每一行,每个单元格的数据,通过jquery的append()的方法,动态创建,添加到另一个表格中即可。

如何用jquery实现把一个带有checkbox的table中选中行的某些字段,赋值到...
那你就在checkbox上绑定一个click事件,当checkbox被选中的时候,就找到table中的行让后把值赋给它就行了

jsp中的checkbox怎么将选中的值传到后台?
<input name="checkboxname" type="checkbox" id="checkbox3" value="橘子" \/>橘子 后台获取代码是 response.setCharacterEncoding("UTF-8");request.setCharacterEncoding("UTF-8");String [] shuigou=request.getParameterValues("checkboxname");for (int i = 0; i < shuigou.length; i++)...

在HTML中当我选中一些checkbox按钮后如何将其中的值在text或下拉框中...
<input type="checkbox" name="equipmentTypeFrom" value="2600" onclick="addToTarget();"\/>2600 <\/div> <div> <fieldset> 设备类型<select name="equipmentTypeTarget"><\/select><br\/> ISO文件<input type="file" name="isoFile"\/><br\/> idle-pc值<input type="text" name="idle-pc...

jquery怎样将<input type="checkbox">check值改变
思路:复选框的check值改变实际是改变checkbox的checked属性,即使用jQuery改变元素的属性 当checkbox存在checked属性时,checkbox会被打钩,标准写法是checked="checked"jQuery中有attr函数,该函数可以改变元素的属性,用下面的方法即可改变checkbox的check值 代码如下:<input type="checkbox" id="test" \/>$...

在js中怎样获得checkbox里选中的多个值?
这里推荐使用jQuery库,比较方便。以下是代码:大致思路就是:先利用name属性值获取checkbox对象,然后循环判断checked属性。(true表示被选中,false表示未选中)具体解释一下:首先用document.getElementsByName()这个方法,通过input标签的name属性将input元素获取,并存进obj这个变量值中。然后建一个check_val...

如何获取checkbox 全部的值
("input:checkbox:checked").each(function(index,element)); \/\/ 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值 ("input:checkbox:checked").map(function(index,domElement)); \/\/ 将所有选中的复选框通过函数返回值生成新的jQuery 对象 实例演示:点击按钮获取checkbox的选中值 创...

...一个被选中时,立即触发一个效果,用js或者jquery应该如何实现_百度...
jq代码。("input[type='checkbox']").click(function(){ if( $("input[type='checkbox']:checked").length>0){ \/\/当复选框选中值大于0,触发一个效果 }else{ \/\/否则,效果消失。} })如果不是你要的效果,追问

相似回答