<script src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//使用:checked选择器，来操作多选框.
$("input[type=checkbox]").click(countChecked);
function countChecked() {
var s = "";
$("input[type=checkbox]:checked").each(function(){
s += $(this).val();
});
var n = $("input[type=checkbox]:checked").length;
$("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>"+"值："+s);
}
countChecked();//进入页面就调用.
//使用:selected选择器，来操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
}).trigger('change');
// trigger('change') 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.
});
</script>
<body>
<form id="form1" action="#">
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br/><br/>
下拉列表1：<br/>
<select name="test" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</body>
即时改变
分享到：
相关推荐
- **主题支持**：继承自jQuery UI，该插件能够无缝地与各种jQuery UI主题搭配，确保与页面其他组件的视觉一致性。 - **事件处理**：提供了丰富的事件接口，如`select`、`deselect`等，方便开发者根据用户操作进行...
在开始使用`Select2`之前，确保已经引入了`jQuery`库和`Select2`的CSS与JS文件。通常情况下，你可以在项目中添加以下链接： ```html <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/...
昨天网上找了很多关于设置select checkbox radio只读的，都没办法满足要求，自己写了一个
这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中，你可能还需要结合DOM遍历、事件冒泡等知识，实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码，通过查看和实践，可以加深...
### Jquery-easyui-tree 常见操作详解 在前端开发中，树形结构（Tree）是非常常见的数据展示方式之一。它可以帮助我们更清晰地组织和展示具有层级关系的数据。Jquery-easyui-tree 是基于 jQuery 和 EasyUI 的一个...
### 一、jQuery选择器与checkbox操作 在jQuery中，我们可以使用不同的选择器来选取页面上的checkbox元素。例如，使用`$('input[type="checkbox"]')`可以选取所有类型的checkbox。如果想要选取特定ID的checkbox，...
在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它提供了简洁、强大的API来操作DOM元素，包括对select这样的下拉列表的操作。本篇文章将详细讲解如何使用jQuery来操作select。 首先，`changeShipMethod`...
1. **DOM操作**：使用jQuery选择器选取需要操作的元素，如`$('select')`或`$('input[type="checkbox"]')`，然后执行增删改查等操作。 2. **事件绑定**：通过`.on()`方法绑定各种事件，如点击事件、输入事件等，响应...
以上就是jQuery操作checkbox和select的基本方法。在实际应用中，这些操作常用于实现表单验证、数据提交等功能。在给定的文件中，`index.html`可能是展示这些操作的示例页面，而`jquery-1.4.2.min.js`是jQuery库的...
在实际应用中，你可能还需要考虑复选框与服务器端的数据交互，比如使用Ajax发送选中值。此外，如果复选框分布在多个地方，你可能需要根据特定的父元素或类名来选择目标复选框，而不是选择所有的复选框。 这个压缩包...
综上所述，jQuery为开发者提供了便利的API来处理checkbox，使得在网页中实现与用户交互变得更加简单和直观。无论是单个checkbox的控制还是批量操作，jQuery都能轻松应对。通过熟练掌握这些技巧，开发者可以创建更加...
**jsTreeSelect：jQuery实现的树形下拉菜单** jsTreeSelect是一款基于jQuery的插件，它能够将传统的下拉菜单转变为交互式的树形结构，为用户提供了更丰富的选择体验。这种树形下拉菜单在数据层级关系复杂时特别有用...
在本文中，我们将深入探讨如何...通过简单的配置和丰富的API，我们可以轻松地将这种功能集成到各种Web应用中，提高用户交互的便捷性和效率。在实际项目中，务必根据需求进行适当的定制和优化，以达到最佳的用户体验。
maxchecked:3,//最多同时选择数，checkbox=true时有效 selectedtext:”,//checkbox=true时有效,选择框文字,为空显示为选中项，非空时固定不变 requiredvalue:[],//必须选择的值,显示为不可点击状态，checkbox=true...
在网页开发中，`checkbox` 和 `select` 是两种常见的用户交互元素，它们用于收集用户的多选或单选数据。本篇文章将详细讲解如何在HTML、CSS和JavaScript中使用这两种元素，以及涉及到的相关操作和应用。 一、...
3. **功能与交互**： - **全选/全不选**：提供一个“全选”和“全不选”的按钮，方便用户快速选择所有或取消所有选项。 - **搜索功能**：在大量选项时，增加搜索输入框，帮助用户快速定位到想要的选项。 - **分组...
本项目名为“jquery模拟div多选checkbox下拉框”，其核心目标是使用jQuery来实现一个功能丰富的多选下拉框替代传统的HTML `<select>` 元素，通过使用`<div>`元素和复选框（checkbox）来提供更自定义化的用户体验。...
在JavaScript的世界里，jQuery库提供了一种简洁的方式来操作DOM元素，包括处理radio、checkbox和select。这些元素在网页表单中十分常见，用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明： 1. **...
本文将深入探讨如何使用jQuery封装Select、Checkbox和Radio元素，以提高前端开发效率并确保跨浏览器兼容性。 一、jQuery封装Select 在HTML中，`<select>`元素用于创建下拉菜单。在jQuery中，我们可以方便地操作...
在IT行业中，`checkBox` 和 `selectAll` 是两个常见的概念，尤其在前端开发领域。`checkBox` 是一种用户界面元素，通常称为复选框，它允许用户从多个选项中选择一个或多个。而 `selectAll` 功能则常用于提供一个快捷...