个人中心
gpt4 book ai didi

jquery - Javascript 通过复选框更改 div 的宽度

转载 作者：行者123 更新时间：2023-11-28 06:34:31 25 4
gpt4 key购买 nike

这是我的来源:

<!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>

它基本上做的是我有 3 个 div。最后一个工作正常，在这种情况下并不重要。我的绿色和红色 div 都是宽度的 50%。如果选中绿色，则红色为 50%，如果未选中绿色，则红色为 100%。

我的问题是，即使选中绿色，红色也应该是 50%，但事实并非如此。红色仍然是 100%。我可以使红色 50% 的唯一方法是取消选中然后选中绿色。它就像页面不加载红色:开始时宽度为 50%。

我注意到通过重新加载页面，在红色的 div 中写着“style="width: 100%;""，当我取消选中然后检查绿色时，它更改为:style="width: 50%; "

所以源可能需要更改，所以如果选中绿色，它会加载 50% 的宽度。你们能看看吗？

最佳答案

更新: 在设置宽度之前，您需要使用 .is(":checked") 来检查哪些复选框被选中，并基于此创建一个决定什么需要设置为 50% 或 100%。

    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;
    }

    if(redEl.is(":checked") && greenEl.is(":checked")) {    
         $(".red").css("width","50%");
         $(".green").css("width","50%"); }
    else if(greenEl.is(":checked"))
           $(".green").css("width","100%");
    else if(redEl.is(":checked"))
           $(".red").css("width","100%");
});
});

工作示例:https://jsfiddle.net/DinoMyte/nx7ru4y0/2/

关于jquery - Javascript 通过复选框更改 div 的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34774581/

25 4 0
文章推荐： html - CSS:为什么 td 和 div 之间会出现间隙？
文章推荐： javascript - 固定菜单项
文章推荐： javascript - 在其他选项卡上的一个 Web 浏览器实例中登录到应用程序
文章推荐： swift - 转换为指定的通用函数参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com