DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery復選框多選賦值給文本框的方法教程
jquery復選框多選賦值給文本框的方法教程
編輯:JQuery特效代碼     

本文實例講述了jquery復選框多選賦值給文本框的方法。分享給大家供大家參考。具體實現方法如下:

代碼如下:<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jquery點擊復選框觸發事件給input賦值</title><base target="_blank" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
* { 
margin: 0; 
padding: 0; 
list-style-type: none; 

 
a, img { 
border: 0; 
text-decoration: none; 

 
body { 
font: 12px/180% Arial, Helvetica, sans-serif, "新宋體"; 

 
table { 
empty-cells: show; 
border-collapse: collapse; 
border-spacing: 0; 

/* tablist */ 
.tablist { 
width: 400px; 
border: solid 8px #ddd; 
margin: 40px auto; 

 
.tablist td { 
line-height: 24px; 
border-bottom: solid 1px #ddd; 
text-align: left; 
padding: 10px; 

 
.tablist td input { 
line-height: 20px; 
margin-left: 5px; 

.tablist td .txtValue 
 

padding: 3px 0; 
width: 180px; 

</style> 
 
</head> 
<body> 
 
<table cellpadding="0" cellspacing="0" class="tablist"> 
<tr> 
<td><input class="txtValue" type="text" name="keleyi" value="" />  <input type="checkbox" data-type="checkall" />全選</td> 
</tr> 
<tr> 
<td> 
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="張三" value="1" />張三 
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="李四" value="2" />李四 
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="趙五" value="3" />趙五 
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="王六" value="4" />王六 
</td> 
</tr> 
</table> 
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('[data-type="checkbox"]').click(function(){ 
var data_value = $(this).attr('data-value'), 
txtalso = $.trim($(".txtValue").val()); 
if($(this).prop("checked")) { 
if(txtalso.length > 0) { 
if(txtalso.indexOf(data_value+',') != -1) { 
return ; 
} else { 
txtalso += data_value + ','; 

} else { 
txtalso = data_value+','; 

} else { 
if(txtalso.indexOf(data_value+',') != -1) { 
txtalso = txtalso.replace(data_value+',', ''); 


$(".txtValue").val(txtalso); 
}); 
$('[data-type="checkall"]').click(function(){ 
var str = ''; 
if($(this).prop("checked")) { 
$.each($('[data-type="checkbox"]'), function(i){ 
str += $(this).attr('data-value') + ','; 
}); 
$('[data-type="checkbox"]').prop('checked', true); 
} else { 
$('[data-type="checkbox"]').prop('checked', false); 

$(".txtValue").val(str); 
}); 
}); 
</script> 
 
</body> 
</html>

希望本文所述對大家的jQuery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved