`
zhouxin464585932
  • 浏览: 80472 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

jQuery操作checkbox,radio, select 功能

阅读更多

要引用jqery.js

<script>
$(function () {
// 全选
$('#hobby_all').click(function () {
$('input[name="hobby[]"]').attr("checked",true);
}) ;

// 反选
$('#hobby_anti_all').click(function () {
$('input[name="hobby[]"]').attr("checked",false);
}) ;

// 全选
$('#city_all').click(function () {
$('input[name="city[]"]').attr("checked",true);
}) ;

// 反选
$('#city_anti_all').click(function () {
$('input[name="city[]"]').attr("checked",false);
}) ;

$('#submit').click(function () {

// 获取多选框的值
hobby = '<br>兴趣爱好: <br>' ;
$('input[@name="hobby[]"]').each(function () {
if ($(this).attr('checked') == true) {
hobby += $(this).attr('value')+",<br>" ;
}
});

// 获取多选框的值
city = '<br><br>喜欢的城市: <br>' ;
$('input[@name="city[]"]').each(function () {
if ($(this).attr('checked') == true) {
city += $(this).attr('value')+",<br>" ;
}
});

// 获取下拉列表的值
age = '<br><br>年龄: <br>' + $('#age').val() ;

// 获取单选框的值
sex = '<br><br>性别: <br>' + $('input[@type="radio"][@checked]').val() ;
$('.content').html(hobby + city + age + sex) ;

});

});
</script>

<style>
.fieldset{
width: 200px;
}

</style>


<div class='test' id='checkbox'>

<form method="post" >
性别
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
<input type="radio" name="sex" value="null" />保密
<br />
<br />
年龄:
<select name="age" id="age" value="年龄">
<option value="20">20</option>
<option value="30" >30</option>
<option value="40" >40</option>
<option value="50">50+</option>
</select>
<br />
<br />
<fieldset class="fieldset">
<legend>兴趣爱好 </legend>
旅游<input type="checkbox" name="hobby[]" id="tour" value="tour" /><br />
音乐<input type="checkbox" name="hobby[]" id="music" value="music" /><br />
足球<input type="checkbox" name="hobby[]" id="football" value="football" /><br />
网游<input type="checkbox" name="hobby[]" id="game" value="game" /><br />
<input type="button" name="hobby_anti_all" id="hobby_anti_all" value="反选"/>
<input type="button" name="hobby_all" id="hobby_all" value="全选" />
</fieldset>
<br />
<fieldset class="fieldset">
<legend>喜欢的城市</legend>
北京<input type="checkbox" name="city[]" id="beijing" value="beijing" /><br />
上海<input type="checkbox" name="city[]" id="shanghai" value="shanghai" /><br />
天津<input type="checkbox" name="city[]" id="tianjin" value="tianjin" /><br />
重庆<input type="checkbox" name="city[]" id="chongqing" value="chongqing" /><br />
<input type="button" name="city_anti_all" id="city_anti_all" value="反选"/>
<input type="button" name="city_all" id="city_all" value="全选" />
</fieldset>
<br /><input type="button" id="submit" value="sumit" />
</form>
<div class="content"></div>
</div>

分享到:
评论

相关推荐

    jquery 设置select checkbox radio只读

    昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个

    jquery操作Radio、Checkbox、Select Demo

    这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    LazyForm radio,checkbox,select样式自定义

    总结来说,"LazyForm radio,checkbox,select样式自定义"是前端开发中一个实用的工具,它结合了jQuery的强大功能,使得表单元素的样式不再受限于浏览器的默认样式,而是可以根据设计师的意图进行自由定制,为用户...

    jquery美化checkbox,radio

    、根据原有的select 模拟生成新的 select。 2、支持键盘,可通过键盘选择选项。 3、可自定义样式。 4、方便灵活,可选择需要的seletc 进行模拟(非全局模拟) 5、判断用户是否开启脚本支持,若未开启,不进行...

    select checkbox radio项直接赋值jQuery插件

    jQuery插件只可以用val方法给input标签的text、...而checkbox、radio属性和select标签就无法直接赋值,必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件,可以直接用setval方法像赋值一样设定选中项。

    使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部

    本文将深入探讨如何使用jQuery封装Select、Checkbox和Radio元素,以提高前端开发效率并确保跨浏览器兼容性。 一、jQuery封装Select 在HTML中,`&lt;select&gt;`元素用于创建下拉菜单。在jQuery中,我们可以方便地操作...

    Jquery操作radio,checkbox,select表单操作实现代码

    本篇文章将详细讲解如何使用jQuery来操作radio、checkbox和select这三个常见的表单元素。 一、Radio(单选按钮)操作 jQuery操作单选按钮(radio)主要涉及选取状态的读取与设置。例如,如果有一组同名的radio按钮...

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中,使用 ...以上就是使用 jQuery 对 `select`、`radio` 和 `checkbox` 元素进行操作的基本方法和技术要点。希望这些内容能帮助你在实际项目中更加高效地使用 jQuery。

    jquery 获得select、radio、checkbox选择的text和value值

    ### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`&lt;select&gt;` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...

    jQuery设置和获取select、checkbox、radio的选中值方法

    jQuery作为一个功能强大的JavaScript库,其对这些表单元素的操作进行了极大的简化,提高了开发效率和用户体验。本文将详细介绍如何使用jQuery设置和获取这些表单控件的选中值。 首先,我们来看下如何设置单选下拉框...

    radio、checkbox、select等选择标签的总结

    在网页设计和开发中,`radio`、`checkbox` 和 `select` 是三种常见的表单元素,用于收集用户输入的数据。这些元素都是HTML语言的一部分,是构建交互式Web页面的关键工具。下面是对这三个标签的详细解释和总结: 1. ...

    JQuery操作select

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。本篇文章将详细讲解如何使用jQuery来操作select。 首先,`changeShipMethod`...

    jquery的checkbox,radio,select等方法小结

    在jQuery中,对HTML元素的操纵是前端开发中不可或缺的一部分,尤其对于`checkbox`、`radio`和`select`这些常见的表单控件,熟练掌握它们的jQuery操作至关重要。这里我们将详细探讨这些方法,帮助你更好地理解和应用...

    jquery操作select大全

    在Web开发过程中,动态地与select元素进行交互是常见的需求,jQuery为此提供了简洁高效的方法来实现这些功能。 #### 2. 选择器的使用 在操作select之前,首先需要熟练掌握jQuery选择器的使用,因为无论是添加、...

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`&lt;select&gt;`元素作为用户交互的重要部分,常用于提供一系列选项供用户选择。jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得...

    Jquery 获取表单text,areatext,radio,checkbox,select值的代码

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...

    jQuery获取Select选择的Text和_Value

    jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作,例如在表单提交前获取用户选择的选项,或者在页面加载时根据服务器端的数据设置选择的选项。本文将详细介绍 jQuery 获取和设置 Select 选择的 Text 和 ...

Global site tag (gtag.js) - Google Analytics