jquery单选框 复选框表格高亮 选中

单选框:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
        $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
        $(‘tbody>tr‘).click(function() {
            $(this)
                .addClass(‘selected‘)    //当前对象为$(this)
                .siblings().removeClass(‘selected‘)   //当前对象为$(this).siblings()
                .end()    //当前对象为$(this)
                .find(‘:radio‘).attr(‘checked‘,true);
        });
        // 如果单选框默认情况下是选择的，则高色.
         // $(‘table :radio:checked‘).parent().parent().addClass(‘selected‘);
        //简化:
          $(‘table :radio:checked‘).parents("tr").addClass(‘selected‘);
         //再简化:
         //$(‘tbody>tr:has(:checked)‘).addClass(‘selected‘);

    })
</script>
</head>
<body>
    <table>
        <thead>
            <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="radio" name="choice" value=""/></td>
                <td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="radio" name="choice" value="" checked=‘checked‘ /></td>
                <td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>
</body>
</html>

复选框1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
        $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
        $(‘tbody>tr‘).click(function() {
            if ($(this).hasClass(‘selected‘)) {
                $(this)
                    .removeClass(‘selected‘)
                    .find(‘:checkbox‘).attr(‘checked‘,false);
            }else{
                $(this)
                    .addClass(‘selected‘)
                    .find(‘:checkbox‘).attr(‘checked‘,true);
            }
        });
        // 如果复选框默认情况下是选择的，则高色.
        // $(‘table :checkbox:checked‘).parent().parent().addClass(‘selected‘);
        //简化:
        $(‘table :checkbox:checked‘).parents("tr").addClass(‘selected‘);
        //$(‘tbody>tr:has(:checked)‘).addClass(‘selected‘);
  })
</script>
</head>
<body>
    <table>
        <thead>
            <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox" name="choice" value=""/></td>
                <td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" checked=‘checked‘ /></td>
                <td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>
</body>
</html>

复选框2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        $(‘tbody>tr‘).click(function() {
            //判断当前是否选中
            var hasSelected=$(this).hasClass(‘selected‘);
            //如果选中，则移出selected类，否则就加上selected类
            $(this)[hasSelected?"removeClass":"addClass"](‘selected‘)  // [hasSelected?"removeClass":"addClass"]为一个三目运算符  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$(this)["removeClass"]("selceted");或者$(this)["addClass"](‘selected‘);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   他们等价于：  $(this).removeClass(‘selected‘)或者$(this).addClass(‘selected‘);
                //查找内部的checkbox,设置对应的属性。
                .find(‘:checkbox‘).attr(‘checked‘,!hasSelected);
        });
        // 如果复选框默认情况下是选择的，则高色.
        $(‘tbody>tr:has(:checked)‘).addClass(‘selected‘);
  })
</script>
</head>
<body>
    <table>
        <thead>
            <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox" name="choice" value=""/></td>
                <td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" checked=‘checked‘ /></td>
                <td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>
</body>
</html>

公共的css：

table        { border:0;border-collapse:collapse;}
td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even        { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected        { background:#FF6500;color:#fff;}
时间： 2024-12-23 15:43:20

jquery单选框 复选框表格高亮 选中的相关文章

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

关于通过jq /js 实现验证单选框 复选框是否都有被选中

今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问题来了 得出来的值 怎么做判断的 ,到现在也没弄明白. 最后果断 用jq来实现,刚开始也是怎么都不行  最后发现clss的值被我写错了 哎 剁手! 好了 下面上jq 实现 验证 单选框 复选框有没有同时被选中: <div class="tab-stpp" id="tab-s

jquery点击复选框触发事件给input赋值

体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <sty

ops-web运维平台-create.jsp-mootools下拉框-复选框

create.jsp页面的,body部分 <body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},true)"> <div id="title">${pageTitle}</div> <s:form id="MYFORM" action="%{pageAction}" method="post&q

Jquery实现一组复选框单选

完整代码: <!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>    <title></title>

jqurey实现单选框 ,复选框,下拉列表

1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

下拉框和单选框复选框的选中的值

1.下拉框的选中值 <select id="select"> <option value="1">1</option> <option value="2">2</option> </select> 第一种:$("select option:checked").val(); 第二种:$("#select").find("opti

jquery中input复选框的checked属性

在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的checked属性,在控制台打印输出.css('checked'),结果为undefined, 不管在HTML中是否设置了checked='checked'; 2.通过attr添加属性即.attr('checked','abc'),会给HTML中input所在处添加checked='checked'这样的代码

jquery关于checkbox复选框是否被选中的问题

本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都是undefined,于是百度各种其他的方法: if ($('')get(0).checked) if($('').is(':checked')) 但是都不起作用,后来终于找到问题的原因了.我用的jquery是1.11.3,但是在1.6以后jquery便作出了改进,在页面加载完毕时,checkbox