`
chanshui
  • 浏览: 84591 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery全选反选

阅读更多

<script type="text/javascript" src="../project/blogcms2/js/jquery.js" ></script>
<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全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    jquery全选反选插件

    本话题将深入探讨“jQuery全选反选插件”的相关知识点,这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先,jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上,当用户需要对一组选项进行...

    Jquery全选反选Checkbox

    "Jquery全选反选Checkbox"是一个常见的功能需求,特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件,让用户能够快速地对一组复选框进行全选或反选操作。 首先...

    jQuery表格行全选反选单选代码

    jQuery表格行全选反选单选代码,例子采用bootstrap格式,可以选择自定义。

    jQuery全选反选及批量删除

    "jQuery全选反选及批量删除"是一个常见的交互功能,常用于表格或列表的管理,例如用户可以选择多个项目进行批量操作,如删除。这里我们将深入探讨如何实现这个功能。 首先,我们需要了解jQuery的选择器和事件绑定。...

    jquery全选反选

    "jquery全选反选"这个主题就是关于如何利用jQuery实现复选框的选择全部(全选)和选择相反(反选)功能,这在诸如表格数据筛选、多选确认等场景中非常实用。 全选功能允许用户一键选中所有复选框,反选则是将所有已...

    JS简单表格列表全选反选代码.zip

    本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能,它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用,例如在用户需要批量操作表格项时。 1. **...

    demo46-jQuery全选,反选,取消选择.html

    demo46-jQuery全选,反选,取消选择.html

    简单实现全选反选功能(html)

    接下来,我们引入jQuery库,并创建一个名为`select.js`的JavaScript文件,来处理全选/反选的逻辑: ```javascript $(document).ready(function() { // 当全选按钮被点击时,触发事件 $('#selectAll').click...

    jquery实现全选反选功能

    jquery实现全选反选功能,代码可以直接使用,可应用于实际项目当中。

    jquery实现全选和反选小功能

    很好用的使用jquery来实现的通用的全选反选功能

    jquery 实现全选,全不选,反选,获取选中的值

    对于“全选”、“全不选”和“反选”功能,jQuery 提供了简洁的解决方案,同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**: 全选功能通常应用于具有多选选项的...

    Jquery 全选反选实例代码

    本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者...

    table全选反选

    jQuery表格行全选反选插件

    实现table表格checkbox复选框的全选 反选

    接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...

    全选反选jquery一句话搞定

    全选反选jquery一句话搞定,真是帅呆了,jquery!

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在网页开发中,jQuery 是一个广泛使用...通过以上介绍,我们可以利用 jQuery 实现复选框的全选、反选和全不选功能,同时结合表单验证插件,确保用户按照规定进行输入。在实际应用中,可以根据具体需求进行调整和优化。

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    jQuery全选、反选与获取选中值

    ### 一、jQuery全选 全选功能通常应用于多选列表或表格中,允许用户一次性选择所有选项。在jQuery中,我们可以通过`$("selector").attr("checked", true)`来实现。这里的`selector`是用于选择你想要设置为选中的...

    jQuery表格行全选反选单选代码.zip

    首先,`jQuery表格行全选反选单选代码`的核心是实现表格中的复选框操作。当用户点击表格的行时,行内的复选框会被选中或取消选中,同时该行会呈现出高亮状态,以提供清晰的视觉反馈。这种功能在数据管理和筛选场景中...

Global site tag (gtag.js) - Google Analytics