checkbox选中与取消选择

先上代码

<form>
    你爱好的运动是?<br/>
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/>
    <input type="button" id="CheckAll" value="全选" />
    <input type="button" id="CheckNo" value="全不选" />
    <input type="button" id="CheckRev" value="反选" />
    </form>

  想要实现的是全选,全不选和反选三种效果,其中需要特别注意的是全选按钮这里

<script>
    $(function(){
        $("#CheckAll").click(function(){
            $("input:checkbox").prop("checked","checked");
        });
        $("#CheckNo").click(function(){
            $("input:checkbox").removeAttr("checked");
        });
        $("#CheckRev").click(function(){
            $("input:checkbox").each(function(){
                this.checked=!this.checked;
            });
        });
    });
</script>

  请注意,现在使用的是prop(),如果使用attr(),那么就会出现下面这种情况:

选择“全选”按钮后,正常;点击“全不选”,正常;当这个时候再去点击“全选”按钮时,发现代码那里的“checked”=checked,但是页面上没有显示出来;

使用prop()方法后,可以解决此问题;

。。。。没有测浏览器的兼容。。。。

时间: 2024-08-06 20:32:50

checkbox选中与取消选择的相关文章

JQuery设置checkbox选中或取消等相关操作

$("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']").removeAttr("checked");//取消全选 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 //获取选择的值 var str=""; $

MFC CheckBox选中或取消选中

CheckBox控件选中或取消选中时: void CFlapLaneDlg::OnBnClickedAutoPolling() { // TODO: 在此添加控件通知处理程序代码 CButton* pBtn = (CButton*)GetDlgItem(IDC_AUTO_POLLING); int state = pBtn->GetCheck(); if (state == 1) // 选中 { } else // 取消选中 { } }

jQuery对checkbox选中和取消选中操作

最近做项目发现jQuery对checkbox的全选和非全选操作只有第一次生效,以后就不生效了,不知道是不是jQuery版本库的问题,最终找到了一个解决方案: 把原来的下面这两句: $('input').attr('checked','checked'); $('input').attr('checked',false); 改成下面的: $('input').prop('checked','checked'); $(this).removeAttr("checked"); 欢迎大神们批评

easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网上百度了很多资料,都没有完全符合自己业务场景的,所以就自己动手写咯. 先说一下自己的业务需求: 1.选中节点,上级以及所有直系上级节点自动选中,所有下级子孙节点全部自动选中: 2.取消选择节点,如果兄弟节点都未选择,则上级以及所有直系上级节点自动取消选择,所有下级子孙节点全部取消选中. 这里说一下c

WPF DataGrid DataGridTemplateColumn 列头checkbox如何在代码中取消选择

0 登录进行投票 <DataGrid Name="DG">                <DataGrid.Columns>                    <DataGridTemplateColumn Width="70">                        <DataGridTemplateColumn.HeaderTemplate>                            &l

checkbox全选,反选,取消选择 jquery

checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ $(this).attr("checked",true); }); //checkbox取消全选 $(":checkbox[name='osfipin']").each(function(){ $(this).attr("checked",false

web前端html实例-点击相文字选中和取消选中checkbox复选框

checkbox复选框大家应该不会陌生,点击此元素可以实现选中或者取消效果. 下面介绍一种更为人性化的措施,点击指定相关内容即可以实现选中和取消选中效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" />

EasyUI带选择框的DataGrid实现点击行&quot;不选中或取消选中&quot;的解决方法。

1 var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否 2 $("#dg").datagrid({ 3 rownumbers:true, 4 url: 'LeadsData.ashx?o=list', 5 method:'get', 6 fit: true, 7 striped:true, 8 pagination: true, 9 fitColumns: true, 10 checkOnSelect: false

EasyUI带选择框的DataGrid实现点击行"不选中或取消选中"的解决方法

var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否  $("#dg").datagrid({      rownumbers:true,      url: 'LeadsData.ashx?o=list',      method:'get',      fit: true,      striped:true,      pagination: true,      fitColumns: true,     c