javascript - 在复选框中,javascript更改变量值

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

如果选中 Area1单选按钮,则会显示下列值:


 var populationScore1 = 50000;


 var populationScore2 = 100000; 


 var populationScore3 = 250000;


 var populationScore4 = 500000;


 var populationScore5 = 10000000;



如果选中 Area2单选按钮legend图例将输出以下值:


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


 //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>";



function show1(){


 document.getElementById('my-legend').style.display ='none'; 


}


function show2(){


 document.getElementById('my-legend').style.display = 'block';


 document.getElementById('populationLegend').style.display = 'block';


}

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


 } 

 <div id="maptype"> 


<div id="content">



<form class="form">


 <div class="switch-field">


 <input type="radio" id="area1" name="switch-two" checked/>


 <label for="area1">Area 1</label>


 <input type="radio" id="area2" name="switch-two"/>


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

我想我需要在某个地方添加一个事件监听器,但是我不确定

时间:

与您的代码相关,每次单击单选按钮时都应填充innerHTML内容。

我希望看到你的完整代码,但在片段中,似乎你的javascript代码应该是动态运行的。

例如,每次单击第二个按钮(show2()函数)时,您应该将显示样式更改的功能更改为重写内部html。

并且我建议定义另一个函数,它绘制接收人口值作为参数或引用成员变量的图例html。

你需要将"onchange"事件添加到你的单选按钮并处理该事件。 将 if/else 代码移到处理程序函数中。

例如:


<input type="radio" id="area1" name="switch-two" onchange="handleAreaChange()"/>



如果你的代码和修改尽可能少,解决方案是 1 ) 创建 update() 函数和 2 ) 设置radio的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>



以下是一种快速而脏的方法来实现你所要做的- 不要改变你的代码。 我做的是将图例创建代码放在一个函数中,每次单击单选按钮时都运行函数。 函数在每次运行时分配总体大小,具体取决于给定的参数。


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


 //LEGEND 


 //Population Legend


 var populateLegend = function(n) {


 if( n == 1) { 


 var populationScore1 = 50000;


 var populationScore2 = 100000; 


 var populationScore3 = 250000;


 var populationScore4 = 500000;


 var populationScore5 = 10000000;


 }else if( n == 2 ) {


 var populationScore1 = 100000;


 var populationScore2 = 200000; 


 var populationScore3 = 500000;


 var populationScore4 = 1000000;


 var populationScore5 = 20000000;


 }


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


}


function show1() {


 document.getElementById('my-legend').style.display = 'none';


}


function show2(){


 document.getElementById('my-legend').style.display = 'block';


 document.getElementById('populationLegend').style.display = 'block';


}


populateLegend(1);

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


 }

<div id="maptype"> 


<div id="content">



<form class="form">


 <div class="switch-field">


 <input type="radio" id="area1" name="switch-two" checked onClick="populateLegend(1);"/>


 <label for="area1">Area 1</label>


 <input type="radio" id="area2" name="switch-two" onClick="populateLegend(2);"/>


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

也就是说,正确编码这个UI的方法是将图例的HTML添加到页面中,然后在单选选择中找到正确的DOM元素,并改变值。

...