显示/隐藏div javascript触发div宽度

时间：2015-10-30 09:14:36

标签： javascript jquery html css

所以我使用此代码显示/隐藏3个div。它就像一个魅力。 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function getCookieValue(a) {
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : '';
}

$(document).ready(function(){

    var redEl = $('input[value="red"]');
    var greenEl = $('input[value="green"]');
    var blueEl = $('input[value="blue"]');

    if (document.cookie.indexOf('red=') != -1) {
        redEl.prop("checked", $.parseJSON(getCookieValue("red")));
    }

    if (document.cookie.indexOf('green=') != -1) {
        greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
    }

    if (document.cookie.indexOf('blue=') != -1) {
        blueEl.prop("checked", $.parseJSON(getCookieValue("blue")));
    }

    $(".red").toggle(redEl.prop("checked"));
    $(".green").toggle(greenEl.prop("checked"));
    $(".blue").toggle(blueEl.prop("checked"));

    $('input[type="checkbox"]').click(function(){

        var expiryDate = new Date();
        expiryDate.setDate(expiryDate.getDate() + 1);
        expiryDate = expiryDate.toUTCString();

        if($(this).attr("value")=="red"){
            $(".red").toggle(this.checked);
            document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle(this.checked);
            document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle(this.checked);
            document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;
        }
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

但我想补充一点。 这就是我想要的：

Div红色为50％宽度 绿色是50％宽度 蓝色是100％宽度。

我想要的是：如果绿色显示/检查，则div red为50％。如果未选中/关闭div green，则div red变为100％。蓝色的一直是正常的，没有任何改变。

4 个答案:

答案 0 :(得分：2)

试一试：100％可行...... 

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery Show Hide Using Checkboxes</title>
    <style type="text/css">
        .box{
            padding: 20px;
            display: none;
            margin-top: 20px;
            border: 1px solid #000;
        }
        .red{ background: #ff0000; }
        .green{ background: #00ff00; }
        .blue{ background: #0000ff; }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">

    function getCookieValue(a) {
        var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
        return b ? b.pop() : '';
    }

    $(document).ready(function(){

        var redEl = $('input[value="red"]');
        var greenEl = $('input[value="green"]');
        var blueEl = $('input[value="blue"]');

        if (document.cookie.indexOf('red=') != -1) {
            redEl.prop("checked", $.parseJSON(getCookieValue("red")));
        }

        if (document.cookie.indexOf('green=') != -1) {
            greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
        }
        if ($('#chkgreen').is(':Checked')) {
            $(".red").css('width', '50%');
        }
        else {
            $(".red").css('width', '96.8%');
        }
        if (document.cookie.indexOf('blue=') != -1) {
            blueEl.prop("checked", $.parseJSON(getCookieValue("blue")));
        }

        $(".red").toggle(redEl.prop("checked"));
        $(".green").toggle(greenEl.prop("checked"));
        $(".blue").toggle(blueEl.prop("checked"));

        $('input[type="checkbox"]').click(function(){

            var expiryDate = new Date();
            expiryDate.setDate(expiryDate.getDate() + 1);
            expiryDate = expiryDate.toUTCString();

            if($(this).attr("value")=="red"){
                $(".red").toggle(this.checked);
                document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;
            }
            if($(this).attr("value")=="green"){
                $(".green").toggle(this.checked);
                document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
            }
            if($(this).attr("value")=="blue"){
                $(".blue").toggle(this.checked);
                document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;
            }
        });
    });
    </script>
    </head>
    <body>
        <div>
            <label>
                <input type="checkbox" name="colorCheckbox" value="red" id="chkred" />
                red</label>
            <label>
                <input type="checkbox" name="colorCheckbox" value="green" id="chkgreen"/>
                green</label>
            <label>
                <input type="checkbox" name="colorCheckbox" value="blue" id="chkblue"/>
                blue</label>
        </div>
        <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
        <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
        <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
    </body>
    </html>

答案 1 :(得分：1)

请尝试下面提到的解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
.box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function getCookieValue(a) {
  var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
  return b ? b.pop() : '';
}

$(document).ready(function(){

var redEl = $('input[value="red"]');
var greenEl = $('input[value="green"]');
var blueEl = $('input[value="blue"]');

if (document.cookie.indexOf('red=') != -1) {
    redEl.prop("checked", $.parseJSON(getCookieValue("red")));
}

if (document.cookie.indexOf('green=') != -1) {
    greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
}

if (document.cookie.indexOf('blue=') != -1) {
    blueEl.prop("checked", $.parseJSON(getCookieValue("blue")));
}

$(".red").toggle(redEl.prop("checked"));
$(".green").toggle(greenEl.prop("checked"));
$(".blue").toggle(blueEl.prop("checked"));

$('input[type="checkbox"]').click(function(){

    var expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + 1);
    expiryDate = expiryDate.toUTCString();

    if($(this).attr("value")=="red"){
        $(".red").toggle(this.checked);
        document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;           
    }
    if($(this).attr("value")=="green"){
        $(".green").toggle(this.checked);
        document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
        if(this.checked) 
            $(".red").css("width","50%");
        else
            $(".red").css("width","100%");

    }
    if($(this).attr("value")=="blue"){
        $(".blue").toggle(this.checked);
        document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;
    }
});
});
</script>
</head>
<body>
<div>
    <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
    <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
    <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
 </div>
 <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
  <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
   <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
 </body>
</html>

答案 2 :(得分：1)

只需在点击事件工作中添加一个小的if条件

if($(this).val() == 'green'){
      width = ($(this).prop('checked'))?'50%':'100%';
      $(".red").css("width",width)
}

Js Fiddle 要在页面加载时进行此工作，您需要添加一些代码来读取cookie并选中复选框，如下所示。

 if (document.cookie.indexOf('green=') != -1) {
        greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
        if(getCookieValue("green")){ // if green checkbox is check 
           $(".red").css("width","50%") // make it,s width 50%
        }
     }

updated fiddle

答案 3 :(得分：0)

为你做了fiddle。删除了示例中的一些功能，但希望本质就是存在。此外，我不认为它能完美地回答您的问题，但如果您想根据选中的方框进行更改，则可以从此开始。 本质很简单，只需使用事件监听器对您要编辑的各个div的css进行修改：

redEl.on("change",function(){
    <your logic here>
});

希望这有帮助

相关问题
最新问题