• 所有问题

    • jQuery中的DOM操作：如图是6行4列的列表（注意是表格），当点击某行任意元素（包括多选框或者后面的任意

    元素）时，该行的多选框会自动勾上，同时该行颜色变成红色，没有勾上的行就变黄色。然后再点该行元素时，多选框勾去掉，变成黄色。然后同时点击其他行时也是出现这种效果。即勾选变红色，没勾上就黄色。

    举报该问题
    推荐答案   2013-04-18
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $("tr").click(function() {
    $(this).css("background-color","#F00").siblings().css("background-color","#FF0").find("input").attr("checked",false);
    $(this).find("input").attr("checked",true);

    });
    });
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    </table>
    </body>
    </html>

    这应该是你要的效果！

    追问

    大神，厉害哦！不过好像不能同时勾选多个耶，怎样子可以实现能够同时勾选多个呢？

    追答<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" target="_blank" rel="nofollow" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $("tr").toggle(function() {
    $(this).css("background-color","#F00").find("input").attr("checked",true);$("input:not(:checked)").parents("tr").css("background-color","#FF0")},function(){
    $(this).css("background-color","#FF0").find("input").attr("checked",false);$("input:not(:checked)").parents("tr").css("background-color","#FF0")
    });
    });
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    </table>
    </body>
    </html>

    这应该是你要的效果！

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2013-04-17
    <script type="text/javascript">
    $(function() {
    $('td, :checkbox').click(function() {
    var checked = $(this).parents("tr")
    .find(":checkbox").is(":checked");
    $(this).parents("tr")
    .css("background", checked ? "yellow" : "red")
    .find(":checkbox").prop("checked", checked ? false : true);
    });
    });
    </script>


    <table border="1">
    <tr>
    <td><input type="checkbox" /></td>
    <td>xxx</td><td>yyy</td><td>zzz</td>
    </tr>
    <!-- 上面 tr 循环 6 次 -->
    </table>

    追问

    大神，你好！你的代码和我所表达的，不大一样哦，可以再看看我的描述然后重新改改下代码吗？

    追答

    当点击某行任意元素：点 yyy

    该行的多选框会自动勾上：实现

    同时该行颜色变成红色：实现

    没有勾上的行就变黄色：实现，页面加载的时候都没有勾上，第一次点击肯定变红色，所以再点就变黄色。

    点击其他行时也是出现这种效果：同上

    是我理解有问题，还是你表达有问题呢？

    第2个回答  2013-04-17
    $('tr').click(function(){with($(':checkbox',this)){attr('checked',!attr('checked'));}with($(this)){backgroundColor(backgroundColor()='red'?'green':'red');}});追问

    大神，可不可以给全部代码啊？

    追答

    这就是全部~

    追问

    亲，我要的是代码，可以直接运行的代码，你试过了吗？要包含那些啊

    追答

    那我就不知道这么加了。

    第3个回答  2013-04-18
    $(function(){
    $("table tr").click(function(event){
    var target=event.target,
    __chk = $("input:checkbox",this);
    if(target.tagName.toLowerCase()=="input"){
    target.checked=!target.checked;
    }
    if(!!__chk.attr("checked")){
    __chk.removeAttr("checked");
    this.style.backgroundColor = "yellow";
    }else{
    __chk.attr("checked","checked");
    this.style.backgroundColor = "red";
    $(this).siblings().css("backgroundColor","yellow").find("input:checkbox").removeAttr("checked");
    }
    });
    });

    <table>
    <tr>
    <td><input type="checkbox" />
    </td>
    <td>aaaa</td>
    </tr>
    <tr>
    <td><input type="checkbox" />
    </td>
    <td>aaaa</td>
    </tr>
    <tr>
    <td><input type="checkbox" />
    </td>
    <td>aaaa</td>
    </tr>
    <tr>
    <td><input type="checkbox" />
    </td>
    <td>aaaa</td>
    </tr>
    </table>

    相似回答
    jquery中有哪些dom操作答：appendTo() 将所有匹配的元素追加到指定的元素中, 实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中 HTML 代码 我想说: jQuery代码: $("你好").appendTo("p"); 结果: 我想说:你好 prepend() 向每个匹配的元素内部前置内容 HTML代码: 我想说: jQuery代码...
    jquery中如何选择选取DOM元素?答：一、选取DOM元素 jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。var $ = document.querySelectorAll.bind(document);这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方...
    大家正在搜
    如图是注意行人标志如图是相向而行的甲乙两物体如图第一个图形中有1个点如图在三角形abc中d为bc中点如图,在矩形abcd中,ab=4如图是相向而行机动车在机非混行的道路上如图如右图第20行第二个数是如图在半径为3的圆o中