JQuery中checkbox一直是一个缠绕已久的问题.现在贴出一段代码.很方便使用.
先上效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" >
<div class="item">
<table border="1" >
<tr>
<td>省级地区</td>
<td>市级地区</td>
<td>县级地区</td>
</tr>
<tr>
<td rowspan="11"><input type="checkbox" id="Areacheckbox" name="areaCB" value="河北省" />河北省</td>
<td rowspan="4"><input type="checkbox" id="Areacheckbox" name="areaCB" value="石家庄" />石家庄</td>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="无极" />无极</td>
</tr>
<tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="正定" />正定</td>
</tr>
<tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="新乐" />新乐</td>
</tr>
<tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="藁城" />藁城</td>
</tr>
<tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="唐山" />唐山</td>
<td></td></tr><tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="张家口" />张家口</td>
<td></td></tr><tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="沧州" />沧州</td>
<td></td></tr><tr>
<td rowspan="2"><input type="checkbox" id="Areacheckbox" name="areaCB" value="保定" />保定</td>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="曲阳" />曲阳</td>
</tr>
<tr>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="定州" />定州</td>
</tr>
<tr>
<td rowspan="1"><input type="checkbox" id="Areacheckbox" name="areaCB" value="廊坊" />廊坊</td>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="霸州" />霸州</td>
</tr>
<tr>
<td rowspan="1"><input type="checkbox" id="Areacheckbox" name="areaCB" value="邢台" />邢台</td>
<td><input type="checkbox" id="Areacheckbox" name="areaCB" value="沙河" />沙河</td>
</tr>
<tr>
<tr>
<td rowspan="0"><input type="checkbox" id="Areacheckbox" name="areaCB" value="省外地区" />省外地区</td>
<td></td><td></td></tr><tr>
<tr>
</table>
</div>
<input type="button" value="选择" name="btn" />
<input id="tags" style="width:500px;" type="text"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">引入jquery</script>
<script type="text/javascript">
var checkBox = $('div.item input[type=checkbox]'),
tagsBox = $('#tags');
checkBox.change(function(){
var s=[];
for(var i=0;i<checkBox.length;i++)
if(checkBox[i].checked) s.push(checkBox[i].value);
tagsBox.val(s.join('，'));
});
</script>
</form>
</body>
</html>
分享到：
相关推荐
总结，"table中checkbox取值"这一主题涉及到HTML元素结构、JavaScript和jQuery的操作、表单提交、前端状态管理和事件监听等多个知识点。熟练掌握这些技能，能帮助开发者更好地实现用户界面的交互功能，提高用户体验...
在Web开发中，复选框（Checkbox）是常用的表单元素之一，用于实现多选功能。jQuery作为一个广泛使用的JavaScript库，提供了简单有效的方法来操作HTML元素，包括复选框。本文将详细解释如何使用jQuery来获取和设置复...
在现代网页设计中，使用jQuery来操作表单元素是非常普遍的做法。...通过本文的介绍，读者可以了解到jQuery中针对表单元素进行取值和赋值操作的便捷方式，掌握这些知识点能够有效地提升开发效率和改善用户的交互体验。
在jQuery中，取值和赋值是基本的操作，以下将详细解释如何使用jQuery进行这些操作。 首先，获取和设置文本框（TEXTAREA）的值： ```javascript // 获取值 var textval = $("#text_id").attr("value"); // 或者 var ...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作，包括对表单元素的处理。本文将详细讲解如何使用 jQuery 对表单元素进行赋值和取值，以帮助开发者更好地理解和应用。 一、普通文本框的...
### jQuery表单元素取值详解 #### 一、引言 在Web开发中，表单是用户与网站交互的重要组成部分。jQuery作为一种流行的JavaScript库，极大地简化了JavaScript编程，特别是DOM操作方面，使得开发者能够轻松地处理HTML...
在给定的文件内容中，我们看到了一些关键的 jQuery 操作和概念，下面将详细解释这些知识点。 1. **取值操作**： - `$("#text_id").val();` 用于获取文本框的值。`val()` 方法用于获取或设置表单元素的值，如输入框...
在Web开发中，复选框（Checkbox）是一种常见的用户交互元素，用于让用户从多个选项中选择一个或多个。jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细...
在本实例中，我们将学习如何通过jQuery来获取***中的CheckBoxList控件中用户选中的项目内容。CheckBoxList是一种服务器控件，用于以列表形式显示多个复选框，允许用户从一组选项中选择多个选项。 在这个示例中，***...
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...
在jQuery Mobile中，处理复选框（checkbox）的值是常见的需求，特别是在表单提交或者数据交互时。本篇文章将详细探讨如何在jQuery Mobile中获取复选框的值。 首先，让我们了解一下HTML中的复选框元素。复选框通常...
在jQuery中，取值和赋值是操作网页元素数据的核心功能。以下是对标题"jQuery 取值、赋值的基本方法"所涉及知识点的详细说明： 1. **取值方法**： - `$("#text_id").attr("value")` 或 `$("#text_id").val()` 用于...
在使用jQuery操作复选框（checkbox）时，有时会出现取值问题，尤其当页面在提交数据到后台并返回时，复选框的选中状态可能不会正确反映。在jQuery的不同版本之间，处理checked属性的方式可能存在差异，这也会导致...
在本文中，我们将深入探讨如何使用jQuery来操作CheckBox（复选框）元素，包括选中、取消选中和获取选中项的值。 首先，我们需要确保页面中已经引入了jQuery库。在示例代码中，通过以下方式引入了jQuery： ```html ...
在文档中，我们关注的是jQuery中关于取值和赋值的基本方法，这些方法对于前端开发至关重要。 1. **取值** - `$("#text_id").attr("value")` 或 `$("#text_id").val()` 用于获取文本框或文本区域的值。 - `$(...
在进行Web前端开发时，常常需要处理表单中的复选框（checkbox）元素，以便获取用户的选择数据。使用jQuery库可以方便地实现这一功能，尤其是当我们需要对一组具有相同名称的复选框进行操作时。jQuery提供了一些选择...