javascript - 在 HTML 中集成 Javascript 和 Jquery

Question

我正在尝试将 JSFiddle 中的 JavaScript 集成到 html 页面中。代码可能不漂亮(事实并非如此)，但它确实有效:)。

问题是代码可以在 JSFiddle 中运行，但我无法在单个 html 文档中实现它。这可能是最愚蠢的问题，但我需要帮助。

这是 JSFiddle :http://jsfiddle.net/nhzr0kyb/

Javascript:

$('#never1').change(function () {
        if ($(this).attr("checked")) {
            $(this).siblings('#less1, #lunar1, #saptamanal1, #week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
        } else {
            $('#less1, #lunar1, #saptamanal1').attr('disabled', false);   
             $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true); 
        }
    });

$('#less1').change(function () {
    $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
});

 $('#lunar1').change(function () {
    $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
});   



  $('#saptamanal1').change(function () {
    if ($(this).attr("checked")) {
        $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', false);
    } else {
        $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
    }
});

 $("#checkbox").prop("checked", false).click(function() {
     $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
 $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
 });


      $(document).ready(function() {
          $('.mutuallyexclusive').click(function () {
              checkedState = $(this).attr('checked');
              $('.mutuallyexclusive:checked').each(function () {
                  $(this).attr('checked', false);                   
              });
              $(this).attr('checked', checkedState);
              $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);

          });
      });

      $(document).ready(function() {
          $('.checkbox1').click(function () {
              checkedState = $(this).attr('checked');
              $('.checkbox1:checked').each(function () {
                  $(this).attr('checked', false);
              });
              $(this).attr('checked', checkedState);
              $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
          });
      });

提前致谢，约瑟夫

Answer 1

为了确保您的代码在 jsfiddle 上是相同的，请在“框架和扩展”部分选择“不换行”，这就是区别。

现在您可以管理加载事件，而不是让 jsfiddle 为您做这件事。

并始终将就绪事件添加到您的代码中

$( document ).ready(function() {
  // Handler for .ready() called.
}); 

或

$(function() {
    console.log( "ready!" );
});

如果不这样做，可能会发生一些错误。