`

jquery实现复选框的全选及单选框的取值

    博客分类:
  • J2EE
阅读更多

下面我们先给出全选代码:
html中的代码:
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1" />
        1
        <br />
        <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2" />
        2
        <br />
        <input type="checkbox" name="checkedAll" id="checkedAll" />
        全选/取消全选

js中的代码:
 $(document).ready(function() { 
//定义全选框的名称为$chkall
   var $chkall = $('#checkedAll');
   var $chkarry = $('input[type="checkbox"]').not ($('#checkedAll'));//取到除全选框的其它复选框
   //全选框 的实现函数
   $chkall.click(function(){
    var b = $(this).attr('checked');//取到全选框的值
    $chkarry.each(function(){ $(this).attr('checked', b); });//设置其它复选框值与全选框同步实现全选,取消全选功能
   });
   //除了全选的其它复选框
   $chkarry.each(function(){
    $(this).click(function(){
     //先把每个其它复选框的值赋给全选框
     $chkall.attr('checked', $(this).attr('checked'));
     //再循环所有其它的复选框是否已经全部选择,实现全选与其它复选框出现全选情况下同步。
    //即如果其它复选都已经选择,则全选也选择。
     $chkarry.each(function(index){ $chkall.attr('checked', ($chkall.attr('checked') && $chkarry.eq(index).attr('checked'))? true:false); });
    });
   }); 
});

相对复选框来说,如何取到单选框的值 就简单得多啦。
下面是单选框取值实现代码:
html的代码:
<div id="test1">
            <input id="radio1" type="radio" name="radio1" value="人">
            人
            <input id="radio2" type="radio" name="radio1" value="鬼">
            鬼
 </div>

 相 对上面的情况有两种实现的方法:
//1、利用div的id实现
//#test1 input 代表是test1元素下的所有input元素
 $("#test1 input").click(function(){
alert($(this).attr("value"));});
//2、取得所有的单选类型的input元素,因为单选可能选择一个,所以this就是当前选择的单选框
 var radio = $('input[type="radio"]');
 radio.click(function()
 {
     alert($(this).attr("value"));   //取值
 });

分享到:
评论

相关推荐

    jquery实现复选框全选和反选

    《锋利的jquery》利用jquery实现复选框的全选和反选

    使用JQuery制作复选框的全选或单选特效

    本教程将深入探讨如何使用jQuery实现复选框的全选和单选特效,为用户界面添加交互性和动态性。 首先,我们需要理解HTML中的复选框(`&lt;input type="checkbox"&gt;`)的基本用法。复选框允许用户从多个选项中选择一个或...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jquery复选框全选操作

    在本示例中,我们将聚焦于jQuery实现复选框的全选与反选功能,这对于创建数据筛选或批量操作的用户界面非常有用。下面将详细介绍这个功能的实现方式。 首先,我们需要在HTML页面中设置一组复选框,通常我们会为这些...

    spreadjs_列头添加复选框全选功能-demo.zip

    《SpreadJS:实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库,由 GrapeCity 公司开发,它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中,我们经常需要在列头添加复...

    js 实现 复选框全选(二)

    js 实现 复选框全选(二)! 值得下载看看!资源免费,大家分享!!

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    jquery 复选框 全选,全不选

    本话题主要关注如何使用jQuery来实现复选框的全选和全不选功能。在HTML页面中,复选框是一种常见的表单元素,用于让用户可以选择多个选项中的一个或多个。全选和全不选功能则为用户提供了一种便捷的方式来一次性选择...

    javascript复选框全选

    javascript 复选框全选,复选框全选,复选框全选

    DataGridView 复选框全选。

    在这个场景下,我们将关注如何在`DataGridView`中实现复选框列的全选功能。这涉及到用户交互的增强,以及对事件响应的编程。 首先,我们需要在`DataGridView`中添加一个复选框列。这可以通过在设计时手动添加,或在...

    Axure RP 复选框全选、反选

    用Axure RP 8.0做的原型设计列子,作用是复选框做全选和非全选,已选的做反选。可以学习下反选或非反选的交互思路。

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中,购物车模块是用户进行商品选购时的重要组成部分。其中,复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    jquery 、js实现复选框 (全选、反选)

    ### 使用jQuery和JavaScript实现复选框的全选与反选功能 在Web开发中,复选框(checkbox)是常用的一种交互元素,特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript...

    jQuery一句话实现复选框全选取消

    jQuery作为一款轻量级的JavaScript库,提供了一种简洁、高效的方式来操作DOM元素,实现复选框的全选和取消全选功能。 本文将详细讲解如何使用jQuery一句话实现复选框的全选和取消全选功能。 首先,我们需要在HTML...

    QTableWidget表头添加复选框实现全选功能

    有时候,我们希望在表格的表头中添加复选框,以便实现全选或取消全选的功能,这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先,我们需要了解`...

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript(JS)实现复选框的全选、全不选和反选功能,这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    复选框全选全不选JS代码

    本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码,以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框(Checkbox)是Web表单中常见的元素,...

    juqery实现复选框全选/反选demo源码

    在标题"jQuery实现复选框全选/反选demo源码"中,我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用,比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码,...

    js控制复选框全选、全不选

    实现全选/全不选功能,通常会有一个主复选框,通常标记为“全选”或“全不选”,它的`id`可以是`selectAll`。当用户点击这个复选框时,我们需要遍历页面上所有的其他复选框,并改变它们的`checked`属性。 以下是一...

    DataGridView行标题加复选框实现全选

    通过以上步骤,我们成功地在`DataGridView`的行标题中添加了复选框,并实现了全选/全不选功能,且不需要额外的按钮触发。这使得用户可以更直观地对数据进行批量操作,提高了应用的易用性。 注意,这个实现方式假设`...

Global site tag (gtag.js) - Google Analytics