javascript - Updating HTML upon drop down choice and checkbox selection -

i have drop down list accompanied javascript & jquery displays text , check box depending on choice. if checkbox ticked html displayed change again. text & checkbox being displayed when checking tick box html not changing.

html:

<div class="plan">     <div class="plan-details1"></div>     <div class="plan-name">         <select id="myselect">             <option value="0">please select mobile plan</option>             <option value="1">package 1</option>             <option value="2">package 2</option>             <option value="3">package 3</option>             <option value="4">package 4</option>             <option value="5">package 5</option>             <option value="6">package 6</option>         </select>     </div>     <div class="plan-price"></div> </div> 

js

$(function () {     $('#myselect').change(function () {         var val = $(this).val();          if (val == '1') {             $('.plan-details1').html('this working 1<br/>');             $('.plan-price').html('<div id="price-m">price: &euro;18</div><input type="checkbox" id="handset-m" value="car" onclick="validate()"> handset');         }          if (val == '2') {             $('.plan-details1').html('this working 2<br/>');             $('.plan-price').html('<div id="price-l">price: &euro;25</div><input type="checkbox" id="handset-l" value="car" onclick="validate()"> handset');         }          if (val == '3') {             $('.plan-details1').html('this working 3<br/>');         }          if (val == '4') {             $('.plan-details1').html('this working 4<br/>');         }          if (val == '5') {             $('.plan-details1').html('this working 5<br/>');         }          if (val == '6') {             $('.plan-details').html('this working 6<br/>');         }      }); });  function validate() {         if (document.getelementbyid('handset-m').checked) {             document.getelementbyid('price-m').innerhtml = 'price: &euro;20';         } else {             document.getelementbyid('price-m').innerhtml = 'price: &euro;18';         }          if (document.getelementbyid('handset-l').checked) {             document.getelementbyid('price-l').innerhtml = 'price: &euro;35';         } else {             document.getelementbyid('price-l').innerhtml = 'price: &euro;25';         }     } 

a fiddle can found here: http://jsfiddle.net/5y4b6/

many help!

this not working because insert checkboxes html markup. onclick handlers never attached real function. change code :

 if (val == '1') {             $('.plan-details1').html('this working 1<br/>');             $('.plan-price').html('<div id="price-m">price: &euro;18</div><input type="checkbox" id="handset-m" value="car"> handset');             document.getelementbyid("handset-m").onclick = validate;         }          if (val == '2') {             $('.plan-details1').html('this working 2<br/>');             $('.plan-price').html('<div id="price-l">price: &euro;25</div><input type="checkbox" id="handset-l" value="car"> handset');             document.getelementbyid("handset-l").onclick = validate;         } 

now thew checkboxes attached validate() function. btw, change validate function check if checkboxes exists / inserted avoid "cannot set checked of null" errors :

function validate() {     if (document.getelementbyid('handset-m')) {         if (document.getelementbyid('handset-m').checked) {             document.getelementbyid('price-m').innerhtml = 'price: €20';         } else {             document.getelementbyid('price-m').innerhtml = 'price: €18';         }     }     if (document.getelementbyid('handset-l')) {         if (document.getelementbyid('handset-l').checked) {             document.getelementbyid('price-l').innerhtml = 'price: €35';         } else {             document.getelementbyid('price-l').innerhtml = 'price: €25';         }     } } 

forked fiddle -> http://jsfiddle.net/8upk3/