jQuery Selectbox Не закрывается

Question

У меня есть сценарий, который создает калькулятор, используя флажки и выпадающие списки.

Я перестраиваю сайт в новом домене, поэтому этот код находится на двух сайтах.

Код переставал работать в голове, поэтому я переместил его в нижний колонтитул, и он снова работал. Я удалил код, чтобы проверить что-то, что не удалось увидеть при запуске скрипта. Когда я вернул скрипт, он снова перестал работать. Теперь это не сработает, независимо от того, где я его положил.

Инструменты разработчика в Chrome предоставляют ошибку для j(). говоря, что это неверно, но на этой странице не возникает эта ошибка на старом сайте, где сценарий идентичен. Вот код:

<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/innerstyle.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/js/validation.js"></script> 
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/js/jquery.selectbox-0.2.js"></script> 
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/jquery.selectbox.css" type="text/css" media="screen" /> 

<script type="text/javascript"> 
var j = jQuery.noConflict(); 
j(document).ready(function(){ 
j("#calc-num-people").selectbox(); 
j("#calc-time").selectbox(); 
j('#checked1').click(function(e) { 
if (j('input#chk-drinking').is(':checked')) 
    { 
     j('#checked1').removeClass("checkbox added");    
     j('#checked1').addClass("checkbox add1"); 
     j('input#chk-drinking').removeAttr('checked'); 
    } 
    else 
    { 
     j('#checked1').removeClass("checkbox add1"); 
     j('#checked1').addClass("checkbox added"); 
     j('input#chk-drinking').attr('checked',true);  
    } 
    calc_gallons(); 
}); 

j('#checked2').click(function(e) { 
if (j('input#chk-washing').is(':checked')) 
    { 
     j('input#chk-washing').removeAttr('checked');   
     j('#checked2').removeClass("checkbox added");    
     j('#checked2').addClass("checkbox add1"); 
    } 
    else 
    { 
     j('input#chk-washing').attr('checked',true);  
     j('#checked2').removeClass("checkbox add1"); 
     j('#checked2').addClass("checkbox added"); 
    } 
    calc_gallons(); 
}); 

j('#checked3').click(function(e) { 
if (j('input#chk-cooking').is(':checked')) 
    { 
     j('input#chk-cooking').removeAttr('checked');   
     j('#checked3').removeClass("checkbox added");    
     j('#checked3').addClass("checkbox add1"); 
    } 
    else 
    { 
     j('input#chk-cooking').attr('checked',true);    
     j('#checked3').removeClass("checkbox add1"); 
     j('#checked3').addClass("checkbox added"); 
    } 
    calc_gallons(); 
}); 
}); 

function calc_gallons() { 
var drinking = (j('input#chk-drinking').attr('checked')) ? 1 : 0; 
var washing = (j('input#chk-washing').attr('checked')) ? 1 : 0; 
var cooking = (j('input#chk-cooking').attr('checked')) ? 1 : 0; 

var answer = (j('#calc-num-people').val() * ((drinking * 0.5) + (washing * 0.25) + (cooking * 0.25)) * j('#calc-time').val()); 
j('.calc-answer-text').html(answer); 
} 
</script> 

UPDATE: Я изменил код, как показано в ответ davcs86 в. Флажки работают, но ответ не обновляется при нажатии на раскрывающийся список. Я предполагаю, что jquery selectbox работает некорректно. selected = "selected" остается в HTML после нажатия любой опции. Таким образом, похоже, что это путается, какой номер использовать в расчете. Как я могу заставить это работать?

<div class="check_main"> 
     <span> 
     <div class="checkbox added" id="checked1"> <input id="chk-drinking" value="1" type="checkbox" checked="checked"> </div> <label>Drinking</label> 
     </span> 
     <span> <div class="checkbox added" id="checked2"> <input id="chk-washing" value="1" type="checkbox" checked="checked"> </div> <label>Washing</label> </span> 
     <span> <div class="checkbox added" id="checked3"> <input id="chk-cooking" value="1" type="checkbox" checked="checked"> </div> <label>Cooking</label> </span> 
    </div> 
    <div class="calc_icons"><img src="/wp-content/uploads/calculator-icons.png"></div> 
    <div class="calc_step2"> 
     <div class="people center"> <label>People</label> 
      <select tabindex="1" onclose="calc_gallons();" id="calc-num-people" name="calc-num-people"> 
       <option selected="selected" value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
      </select> 
     </div> 
     <div class="cross"> </div> 
     <div class="people center months"> <label>Months</label> 
      <select tabindex="2" onclose="calc_gallons();" id="calc-time"> 
       <option value="30">1</option> 
       <option value="60">2</option> 
       <option selected="selected" value="90">3</option> 
       <option value="120">4</option> 
       <option value="150">5</option> 
       <option value="180">6</option> 
      </select> </div> 
     <div class="cross"> </div> 
     <div class="people center gallons"> <label>Gallons</label> 
      <div class="calc-answer-text">90</div> 
     </div> 
    </div> 

Answer 1

Создание области JQuery для j, с чем-то вроде

jQuery.noConflict(); 
(function(j){ 
    j(function(){ 
     //... 
    }); 
})(jQuery); 

Кроме того, после того, как JQuery 1.6+, вы должны использовать .prop() когда working with checkboxes. Таким образом, ваш код будет

jQuery.noConflict(); 
(function(j){ 
    j(function(){ 
     j("#calc-num-people").selectbox(); 
     j("#calc-time").selectbox(); 
     j('#checked1').click(function(e) { 
     if (j('input#chk-drinking').is(':checked')) 
      { 
       j('#checked1').removeClass("checkbox added");    
       j('#checked1').addClass("checkbox add1"); 
       j('input#chk-drinking').prop('checked', false); 
      } 
      else 
      { 
       j('#checked1').removeClass("checkbox add1"); 
       j('#checked1').addClass("checkbox added"); 
       j('input#chk-drinking').prop('checked',true);  
      } 
      calc_gallons(); 
     }); 

     j('#checked2').click(function(e) { 
     if (j('input#chk-washing').is(':checked')) 
      { 
       j('input#chk-washing').prop('checked', false);   
       j('#checked2').removeClass("checkbox added");    
       j('#checked2').addClass("checkbox add1"); 
      } 
      else 
      { 
       j('input#chk-washing').prop('checked',true);  
       j('#checked2').removeClass("checkbox add1"); 
       j('#checked2').addClass("checkbox added"); 
      } 
      calc_gallons(); 
     }); 

     j('#checked3').click(function(e) { 
     if (j('input#chk-cooking').is(':checked')) 
      { 
       j('input#chk-cooking').prop('checked', false);   
       j('#checked3').removeClass("checkbox added");    
       j('#checked3').addClass("checkbox add1"); 
      } 
      else 
      { 
       j('input#chk-cooking').prop('checked',true);    
       j('#checked3').removeClass("checkbox add1"); 
       j('#checked3').addClass("checkbox added"); 
      } 
      calc_gallons(); 
     }); 

     function calc_gallons() { 
      var drinking = (j('input#chk-drinking').prop('checked')) ? 1 : 0; 
      var washing = (j('input#chk-washing').prop('checked')) ? 1 : 0; 
      var cooking = (j('input#chk-cooking').prop('checked')) ? 1 : 0; 
      var answer = (j('#calc-num-people').val() * ((drinking * 0.5) + (washing * 0.25) + (cooking * 0.25)) * j('#calc-time').val()); 
      j('.calc-answer-text').html(answer); 
     } 
    }); 
})(jQuery); 

UPDATE

Поскольку OP используется select-box plugin, необходимо использовать методы их пересчитывать галлоны после изменения выбора.

j("#calc-num-people, #calc-time").selectbox({ 
    onChange: function (val, inst) { 
    calc_gallons(); 
    } 
}); 

вместо,

j("#calc-num-people").selectbox(); 
j("#calc-time").selectbox(); 

Answer 2

Как @Andreas сказал. Первичной проблемой может быть не включен jQuery cdn.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>