checkBox的使用

checkBox的使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            // 全选

            $("#btnCheckAll").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", true);

            });

            // 全不选

            $("#btnCheckNone").bind("click", function () {

                $("[name = chkItem]:checkbox").attr("checked", false);

            });

            // 反选

            $("#btnCheckReverse").bind("click", function () {

                $("[name = chkItem]:checkbox").each(function () {

                    $(this).attr("checked", !$(this).attr("checked"));

                });

            });

            // 全不选

            $("#btnSubmit").bind("click", function () {

                var result = new Array();

                $("[name = chkItem]:checkbox").each(function () {

                    if ($(this).is(":checked")) {

                        result.push($(this).attr("value"));

                    }

                });

                alert(result.join(","));

            });

        });

    </script>

</head>

<body>

    <div>

        <input name="chkItem" type="checkbox" value="今日话题" />今日话题

        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点

        <input name="chkItem" type="checkbox" value="财经" />财经

        <input name="chkItem" type="checkbox" value="汽车" />汽车

        <input name="chkItem" type="checkbox" value="科技" />科技

        <input name="chkItem" type="checkbox" value="房产" />房产

        <input name="chkItem" type="checkbox" value="旅游" />旅游

    </div>

    <div>

        <input id="btnCheckAll" type="button" value="全选" />

        <input id="btnCheckNone" type="button" value="全不选" />

        <input id="btnCheckReverse" type="button" value="反选" />

        <input id="btnSubmit" type="button" value="提交" />

    </div>

</body>

</html>
时间: 2024-11-05 16:38:00

checkBox的使用的相关文章

Android ExpandableListView 带有Checkbox的简单应用

expandablelistview2_groups.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&qu

自定义input[type=&quot;checkbox&quot;]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

checkbox管理

这是我写的关于checkbox的管理的方法: 主要目的是1.管理checkbox全选,单个选的状态:(例如当所有的单个选框都选中时,全选框的状态应该是选中,) 2.选中,取消选中时更新数据: 目的: 实现批量操作(批量删除,批量修改)时的状态管理: 并不完善:而且感觉这样做不好:但是技术有限,想不出其他方法了: 如果哪位大神路过,还望指导一下. <!doctype html> <html lang="en"> <head> <meta char

winform checkbox Checked属性与CheckedChanged事件的关系

注意 當 AutoCheck 屬性為 true (預設值) 時,當按一下 CheckBox 時,它便會自動選取或取消選取.否則,您必須在發生 Click 事件時,手動設定 Checked 屬性.https://msdn.microsoft.com/zh-tw/library/aa983710(v=vs.71).aspx

Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值

jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked")

关于input[type=&#39;checkbox&#39;]全选的问题

今天在做一个全选功能的时候,发现了一个问题,就是如果我在选择全选之前,我就已经选择了一个input,然后我再去选择全选并且以后再取消全选的时候,这个我之前选择的input始终处于选择状态,但是他的checked的值一直是在true和false之间变化,当checked=false的时候,仍然是被选中的.到现在还没处理好这个问题.希望看到的哪位大神能给个好的解决办法,实在感激.下面是类似的代码. <!DOCTYPE html><html lang="en"><

jquery checkbox勾选/取消勾选的问题

<form>         你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />         <input type="checkbox" name="items" value="足球" />足球                 <input type="checkbo

自定义CheckBox的选中与否样式

我们在做APP应用时,经常要用到CheckBox控件,但是系统原有的CheckBox样式又不满足我们的需求,我们就要自定义CheckBox选中与否状态,其实就同Button一样,设置其选择与否背景即可. 布局如下: <CheckBox android:id="@+id/foot_mark_cb" android:layout_width="wrap_content" android:layout_height="wrap_content"

HTML5中的checkbox

1.选中checkbox (1)<input type="checkbox" checked/> (2)<input type="checkbox" checked="checked"/> (3)<input type="checkbox" checked=""/> 2.不选中checkbox (1)<input type="checkbox"

jquery版本间兼容性:checkbox选中状态

最近在学习Jquery,发现attr不太好用,从网上搜了下终于知道其原因,记下备查. 以下为以为网友在js贴吧的内容: 以<input type="checkbox" id="all"/>为例子取值的例子$("#all").attr("checked")在1.6前(含1.6),返回值是boolean类型的true或false:在1.6后,返回值是"checked"或undefined. 再来看赋