Fatal编程技术网
  • javascript/
  • Javascript 更改复选框上的变量值

Javascript 更改复选框上的变量值

javascript html css

Javascript 更改复选框上的变量值,javascript,html,css,Javascript,Html,Css,我需要能够更改复选框检查变量的值 我想做的是，当选中区域1单选按钮时，图例会显示以下值： var populationScore1 = 50000; var populationScore2 = 100000; var populationScore3 = 250000; var populationScore4 = 500000; var populationScore5 = 10000000; var populationScore1 =

我需要能够更改复选框检查变量的值

我想做的是，当选中区域1单选按钮时，图例会显示以下值：

    var populationScore1 = 50000;
    var populationScore2 = 100000; 
    var populationScore3 = 250000;
    var populationScore4 = 500000;
    var populationScore5 = 10000000;

    var populationScore1 = 100000;
    var populationScore2 = 200000; 
    var populationScore3 = 500000;
    var populationScore4 = 1000000;
    var populationScore5 = 20000000;
当选中区域2单选按钮时，图例会显示以下值：

    var populationScore1 = 50000;
    var populationScore2 = 100000; 
    var populationScore3 = 250000;
    var populationScore4 = 500000;
    var populationScore5 = 10000000;

    var populationScore1 = 100000;
    var populationScore2 = 200000; 
    var populationScore3 = 500000;
    var populationScore4 = 1000000;
    var populationScore5 = 20000000;
我在下面创建了一个简单的if-then语句：

有关守则如下：

    if(area1.checked) {     
    var populationScore1 = 50000;
    var populationScore2 = 100000; 
    var populationScore3 = 250000;
    var populationScore4 = 500000;
    var populationScore5 = 10000000;
    } else if (area2.checked) {

    var populationScore1 = 100000;
    var populationScore2 = 200000; 
    var populationScore3 = 500000;
    var populationScore4 = 1000000;
    var populationScore5 = 20000000;    
    }
它在页面加载时也可以工作，但只有在我手动将选中的状态添加到单选按钮时才能工作

完整代码如下：

    if(area1.checked) {     
    var populationScore1 = 50000;
    var populationScore2 = 100000; 
    var populationScore3 = 250000;
    var populationScore4 = 500000;
    var populationScore5 = 10000000;
    } else if (area2.checked) {

    var populationScore1 = 100000;
    var populationScore2 = 200000; 
    var populationScore3 = 500000;
    var populationScore4 = 1000000;
    var populationScore5 = 20000000;    
    }   

var映射；
//颜色
//人口地图颜色
var populationColor=“”；//多边形填充颜色
变量populationColor1='#edf8fb'；
var populationColor2='#b2e2e2'；
变量populationColor3='#66c2a4'；
变量populationColor4='#2ca25f'；
变量populationColor5='#006d2c'；
//传奇分数
//人口地图分数
如果（区域1.选中）{
var populationScore1=50000；
var populationScore2=100000；
var populationScore3=250000；
var populationScore4=500000；
变量populationScore5=10000000；
}否则如果（区域2.选中）{
var populationScore1=100000；
var populationScore2=200000；
var populationScore3=500000；
var populationScore4=1000000；
变量填充分数5=20000000；
}		
//传奇
//人口传说
document.getElementById（'populationLegend'）.innerHTML=
"" +
“人口”+
"" +
“
    ”+
“
  • 0-”+populationScore1.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“+”
    • ”+
“
  • ”+populationScore1.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“+”-“+populationScore2.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“，”，“
    • ”+
“
  • ”+populationScore2.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“+”-“+populationScore3.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“，”，“
    • ”+
“
  • ”+populationScore3.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“+”-“+populationScore4.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“，”，“
    • ”+
“
  • ”+populationScore4.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“+”-“+populationScore5.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，”，“，”，“
    • ”+
“
”+
"" +
"";
函数show1（）{
document.getElementById（'my-legend'）.style.display='none'；
}
函数show2（）{
document.getElementById（'my-legend'）.style.display='block'；
document.getElementById（'populationLegend'）.style.display='block'；
}
#我的传奇{
位置：绝对位置；
底部：5%；
左：2%；
z指数：5；
背景色：#fff；
填充物：5px；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
边界半径：3px；
框大小：边框框；
-moz框大小：边框框；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
显示：无；
}
#我的传奇。传奇标题{
文本对齐：左对齐；
边缘底部：5px；
字体大小：粗体；
字体大小：90%；
}
#我的传奇。传奇规模{
保证金：0；
边缘底部：10px；
填充：0；
浮动：左；
列表样式：无；
}
#我的传奇。传奇的规模{
字体大小：70%；
列表样式：无；
左边距：0；
线高：16px；
边缘底部：2px；
}
#我的legend ul.legend-labels li span{
显示：块；
浮动：左；
高度：17px；
宽度：20px；
右边距：5px；
左边距：0；
}
#我的传奇ul.legend-labels li：第一个孩子{
边界半径：4px4p0；
}
#我的传奇ul.legend-labels li：最后一个孩子{
边界半径：0 0 4px 4px；
}		
#我的传奇{
颜色：#777；
}
输入#a{
边框：1px黑色实心；
边界半径：4px 0 0 4px；
}

一区
区域2
没有传奇
传奇
与代码相关每次单击单选按钮时，都应填充innerHTML内容

我想看看你的完整代码，但在代码片段中，你的javascript代码运行起来就像是内置的，应该是动态的

在本例中，每次单击第二个按钮（show2（）函数）时，都应该将函数从显示样式更改更改为重新编写内部html

我建议定义另一个函数来绘制图例html，该图例html接收作为参数的总体值或引用成员变量。

与您的代码相关，您应该在每次单击单选按钮时填充innerHTML内容

我想看看你的完整代码，但在代码片段中，你的javascript代码运行起来就像是内置的，应该是动态的

在本例中，每次单击第二个按钮（show2（）函数）时，都应该将函数从显示样式更改更改为重新编写内部html

我建议定义另一个函数，该函数绘制图例html，接收总体值作为参数或引用成员变量。

使用您编写的代码并尽可能少地修改，解决方案是1）创建
update（）
函数，2）设置
onclick=“update（）”
收音机的属性

<style>
    #my-legend {
        position: absolute;
        bottom: 5%;
        left: 2%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
        border-radius: 3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        display: none;
    }
    #my-legend .legend-title {
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 90%;
    }
    #my-legend .legend-scale ul {
        margin: 0;
        margin-bottom: 10px;
        padding: 0;
        float: left;
        list-style: none;
    }
    #my-legend .legend-scale ul li {
        font-size: 70%;
        list-style: none;
        margin-left: 0;
        line-height: 16px;
        margin-bottom: 2px;
    }
    #my-legend ul.legend-labels li span {
        display: block;
        float: left;
        height: 17px;
        width: 20px;
        margin-right: 5px;
        margin-left: 0;
    }
    #my-legend ul.legend-labels li:first-child  span {
        border-radius: 4px 4px 0 0;
    }
    #my-legend ul.legend-labels li:last-child  span {
        border-radius: 0 0 4px 4px;
    }       
    #my-legend a {
        color: #777;
    }
    input #a {
        border: 1px black solid;
        border-radius: 4px 0 0 4px;
    }
</style>
<div id="maptype">
    <div id="content">
        <form class="form">
            <div class="switch-field">
                <input type="radio" id="area1" name="switch-two" onclick="update();" checked/>
                <label for="area1">Area 1</label>
                <input type="radio" id="area2" name="switch-two" onclick="update();" />
                <label for="area2">Area 2</label>
            </div>
        </form>
        <label class="container" style="margin-top: 12px;" onclick="show1();">No Legend
            <input type="radio" checked="checked" name="radio" id="area">
                <span class="checkmark"></span>
            </label>
            <label class="container" onclick="show2();">Legend
                <input type="radio" name="radio" id="Population">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
        <div id="my-legend">
            <div id="populationLegend"></div>
        </div>
    </div>
</div>
<script>
    var map;

    //COLORS
    // Population Map Color
    var populationColor = ""; // polygon fill color
    var populationColor1 = '#edf8fb';
    var populationColor2 = '#b2e2e2';
    var populationColor3 = '#66c2a4';
    var populationColor4 = '#2ca25f';
    var populationColor5 = '#006d2c';

    function update() {
        // LEGEND SCORES
        // Population Map Score
        if (area1.checked) {
            var populationScore1 = 50000;
            var populationScore2 = 100000;
            var populationScore3 = 250000;
            var populationScore4 = 500000;
            var populationScore5 = 10000000;
        } else if (area2.checked) {
            var populationScore1 = 100000;
            var populationScore2 = 200000;
            var populationScore3 = 500000;
            var populationScore4 = 1000000;
            var populationScore5 = 20000000;
        }

        // LEGEND   
        // Population Legend
        document.getElementById('populationLegend').innerHTML =
            "<div id='populationLegend'>" +
            "<div class='legend-title'>Population</div>" +
            "<div class='legend-scale'>" +
            "<ul class='legend-labels'>" +
            "<li><span style='background:" + populationColor1 + "'></span>0 - " + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor2 + "'></span>" + populationScore1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor3 + "'></span>" + populationScore2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor4 + "'></span>" + populationScore3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "<li><span style='background:" + populationColor5 + "'></span>" + populationScore4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + populationScore5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</li>" +
            "</ul>" +
            "</div>" +
            "</div>";
    }
    update();

    function show1() {
        document.getElementById('my-legend').style.display = 'none';
    }

    function show2() {
        document.getElementById('my-legend').style.display = 'block';
        document.getElementById('populationLegend').style.display = 'block';
    }
</script>


#我的传奇{
位置：绝对位置；
底部：5%；
左：2%；
z指数：5；
背景色：#fff；
填充物：5px；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
边界半径：3px；
框大小：边框框；
-moz框大小：边框框；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
显示：无；
}
#我的传奇。传奇标题{
文本对齐：左对齐；
边缘底部：5px；
字体大小：粗体；
字体大小：90%；
}
#我的传奇。传奇规模{
保证金：0；
边缘底部：10px；
填充：0；
浮动：左；
列表样式：无；
}
#我的传奇。传奇的规模{
字体大小：70%