需求一个js 或者 jq 通过点击一个按钮，来改变2个div的背景颜色

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<style>
.div1{ width:100px; height:100px; background:#00F;}
.div2{ width:100px; height:100px; background:#f00;}
.div3{ width:100px; height:100px; background:#3F6;;}

</style>
<div class="div1"><input name="" type="checkbox" value="">AAAAAA</div>
<br>
<div class="div2"><input name="" type="checkbox" value="">BBBBBB</div>
<br>
<div class="div3"><input name="" type="checkbox" value="">cccccc</div>
<br>
<input name="" type="button" value="点击">

</body>
</html>

如我选中A和B 在点击按钮，那么A和B的背景颜色就互换，或者我点A和C 则A和C的背景颜色互换

但我选中A,B,C 3个的时候，点击提示不能超过3个。

举报该文章

相关建议 2015-11-05

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery cookie</title>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<title>é¢è²äºæ¢</title>
</head>
<body>
<style>
.div1{ width:100px; height:100px; background:#00F;}
.div2{ width:100px; height:100px; background:#f00;}
.div3{ width:100px; height:100px; background:#3F6;;}
</style>
<div class="div1"><input name="" type="checkbox" value="a">AAAAAA</div>
<br>
<div class="div2"><input name="" type="checkbox" value="b">BBBBBB</div>
<br>
<div class="div3"><input name="" type="checkbox" value="c">cccccc</div>
<br>
<input name="" type="button" value="ç¹å»">
<script>
$(function(){
$("input:button").click(function(){
var len = $(":checked").length;
if(len<=1){
alert("è¯·éæ©ä¸¤ç§é¢è²");
}else if(len>2){
alert("ä¸è½è¶è¿ä¸¤ç§é¢è²");
}else{
var background1 = $(":checked").eq(0).parent().css("background");
var background2 = $(":checked").eq(1).parent().css("background");
$(":checked").eq(0).parent().css("background",background2);
$(":checked").eq(1).parent().css("background",background1);
}
});
});
</script>
</body>
</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f87s2qqq4s44p7872sq.html

其他看法

第1个回答推荐于2017-10-15

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>test</title>
<style>
.div1{
width:100px;
height:100px;
background:#00F;
}
.div2{
width:100px;
height:100px;
background:#f00;
}
.div3{
width:100px;
height:100px;
background:#3F6;
}
</style>
<script>
var exchange = function(){
var cks = document.getElementsByName("ck");
var count = 0;
var arr = [];
for(var i = 0; i < cks.length; i++){
var cksi = cks[i];
if(cksi.checked){
count++;
arr.push(cksi);
}
}
if(count > 2){
alert("不能超过3个");
}else if(count == 2){
var div1 = arr[0].parentElement,
div1c = getStyle(div1, "backgroundColor");
var div2 = arr[1].parentElement,
div2c = getStyle(div2, "backgroundColor");
div1.style.backgroundColor = div2c;
div2.style.backgroundColor = div1c;
}
}
var getStyle = function(dom, attr){
return dom.currentStyle ?
dom.currentStyle[attr]
: getComputedStyle(dom, false)[attr];
}
</script>
</head>
<body>
<div class="div1">
<input name="ck" type="checkbox" value="" />
AAAAAA
</div>
<br / >
<div class="div2">
<input name="ck" type="checkbox" value="" />
BBBBBB
</div>
<br / >
<div class="div3">
<input name="ck" type="checkbox" value="" />
cccccc
</div>
<br / >
<input type="button" value="点击" onclick="exchange()" />
</body>
</html>

本回答被提问者采纳

第2个回答 2015-11-05

第3个回答 2015-11-05

$("#click").click(function(){
        var checkboxes = $("input");
        var checkedSum = 0;
        var checkedArr = [];
        for(var i=0;i<checkboxes.length;i++){
            if (checkboxes[i].checked){
                checkedSum++;
                checkedArr.push(checkboxes[i]);
            }
        }
        if (checkedSum != 2){
            alert("请选择2个!")
            return ;
        }
        var div1 = $(checkedArr[0]).parent('div');
        var div2 = $(checkedArr[1]).parent('div');
        var div1_color = $(div1).css('background-color');
        var div2_color = $(div2).css('background-color');
        $(div1).css('background-color', div2_color);
        $(div2).css('background-color', div1_color);
    });

相似回答

大家正在搜