jquery获取checkbox选中的值并追加到input中

最新推荐文章于 2024-01-25 16:32:55 发布

我是高手高手高高手

最新推荐文章于 2024-01-25 16:32:55 发布

阅读量1.5k

点赞数

分类专栏： jQuery JS技巧 layui插件

JS技巧同时被 3 个专栏收录

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

layui插件

86 篇文章 6 订阅

订阅专栏

方法一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>  
</head>

<body>
<script>
$(function(){
    $("input[name='chbox']").change(function(){
        var result="";
        $("input[name='chbox']:checked").each(function(){
               result+=$(this).val()+',';

        });
        if(result!=""){
            result=result.substring(0,result.lastIndexOf(',')); 
        }
        $("#tinput").val(result);    
    });
})

</script>
<input type="text" id="tinput"/>
        <div>
            <input type="checkbox" name="chbox" value="10"/>aa
            <input type="checkbox" name="chbox" value="20"/>bb
            <input type="checkbox" name="chbox" value="30"/>cc
            <input type="checkbox" name="chbox" value="40"/>dd
    
        </div>
        
  
</body>
</html>

方法二：在layui 中实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css"/>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="layui/layui.js"></script>
</head>

<body>

<form class="layui-form" > 
<input type="text" id="tinput"/>

  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input name="like[write]" title="写作" type="checkbox" lay-filter="encrypt" value="10">
      <input name="like[read]" title="阅读" type="checkbox" lay-filter="encrypt" value="20">
      <input name="like[game]" title="游戏" type="checkbox" lay-filter="encrypt" value="30">
    </div>
  </div>
  
 
 </form> 
<script>
layui.use(['form'], function(){
  var form = layui.form //或var form = layui.form()
  ,layer = layui.layer;
  
     form.on('checkbox(encrypt)', function(data){
	  var result="";
	  if(data.elem.checked){
		     result =data.value+','+$("#tinput").val();
		}else{
			
				var a1=data.value;
				var a2=$("#tinput").val();
				var arr = a2.split(',');//字符串转数组
				var result="";
				$.each(arr, function(){
					var a=this;
					if(a1==a){
						return true;
					}
					 result+=a+',';	
				
				});
				
				  result=result.substring(0,result.length-1);//去掉最后一个“，”
		}
       
        $("#tinput").val(result);  
    });        
          

  
});
</script>

</body>
</html>