jQuery работает в JSFiddle, но не в локальной среде RoR?

0

В настоящее время у меня есть две функции JavaScript. Функция "Проверить все" отлично работает как в JSFiddle, так и в локальной среде (http://0.0.0.0:3000). Однако "Select Animal" или функция, которая выбирает только определенные опции в форме, работает только в JSFiddle, но не в локальном envirobment. Интересно, что вызывает эту проблему.

Вот коды внутри моего "_form.html.erb":

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

    <script language='JavaScript'>
          checked = false;
          function checkedAll () {
            if (checked == false){checked = true}else{checked = false}
            for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
          document.getElementById('myform').elements[i].checked = checked;
        }
          }
    </script>

    <body>
        <form id="myform">
        Foo1<input type="checkbox" name="foo1"/>
        Bar2<input type="checkbox" name="bar2"/>
        Rah3<input type="checkbox" name="rah3"/>
        Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
        </form>
    </body>

    <script language='JavaScript'>
        function checkAnimal () {
            var values = ['1', '2', '4', '5'];
            $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
                     }   
    </script>

    <body>
        <form id='list'><br>
        1<input type='checkbox' value='1' />
        2<input type='checkbox' value='2' />
        3<input type='checkbox' value='3' />
        4<input type='checkbox' value='4' />
        5<input type='checkbox' value='5' />
        CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkthese' onclick='checkAnimal()'><br>
        </form>
   </body>

РЕДАКТИРОВАТЬ:

Я изменил свои коды на следующие:

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


<script language='JavaScript'>
  checked = false;
  function checkedAll () {
    if (checked == false){checked = true}else{checked = false}
    for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
  document.getElementById('myform').elements[i].checked = checked;
}
  }
</script>

<script language='JavaScript'>
    function checkAnimal () {
        var values = ['1', '2', '4', '5'];
        $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));

             }   
</script>

<body>

<form id="myform">
Foo1<input type="checkbox" name="foo1"/>
Bar2<input type="checkbox" name="bar2"/>
Rah3<input type="checkbox" name="rah3"/>
Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
</form>

<form id='list'><br>
1<input type='checkbox' value='1' />
2<input type='checkbox' value='2' />
3<input type='checkbox' value='3' />
4<input type='checkbox' value='4' />
5<input type='checkbox' value='5' />
CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'><br>
</form>

</body>

И функция "Проверить все" работает очень хорошо, а "Check Animal" все еще не работает:/

ВТОРОЙ РЕДАКТИРОВАНИЕ:

Я также попытался удалить голову tads вокруг jquery.min.js и теги тела вокруг форм, и это дает тот же результат. Проверять все работы и проверять животных нет.

ТРЕТЬЕ ИЗМЕНЕНИЕ:

Пересмотренные коды после прочтения предложений ребят. К сожалению, это все еще не работает. Очень интересно!

    <head>

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

    <script language='JavaScript'>
      checked = false;
      function checkedAll () {
        if (checked == false){checked = true}else{checked = false}
        for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
      document.getElementById('myform').elements[i].checked = checked;
      }
      }
    </script>

    <script language='JavaScript'>
        $(function() {
        function checkAnimal () {
        var values = ['1', '2', '4', '5'];
        $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
        }
        }); 
    </script>

    </head>

    <body>

    <form id="myform">
    Foo1<input type="checkbox" name="foo1"/>
    Bar2<input type="checkbox" name="bar2"/>
    Rah3<input type="checkbox" name="rah3"/>
    Check all: <input type='checkbox' name='checkall' onclick='checkedAll()'>
    </form>

    <form id='list'><br>
    1<input type='checkbox' value='1' />
    2<input type='checkbox' value='2' />
    3<input type='checkbox' value='3' />
    4<input type='checkbox' value='4' />
    5<input type='checkbox' value='5' />
    CheckAnimal<input type='checkbox' ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'><br>
    </form>

   </body>

EDIT 4:

Я удалил $(function() { вокруг функции "Проверить животных" после того, как Firebug показывает, что "Check Animal" не определен. И теперь новая ошибка:

TypeError: $(...).find is not a function

...lue=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox...

Новый код "Проверить животных" просто обращается обратно к исходному коду:

<script language='JavaScript'>
function checkAnimal() {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true);

}
</script>
  • 0
    Почему ваш сценарий находится между разделами головы и тела? и несколько разделов головы и тела в вашем HTML?
  • 0
    Я не вижу Select Animal нигде в вашем коде.
Показать ещё 15 комментариев
Теги:

2 ответа

0
Лучший ответ

Я нашел решение!

Большое вам спасибо за вашу помощь. Без тебя я бы не понял этого.

Решение меняет "$" в коде на "jQuery" для функции "checkAnimal", как показано ниже:

<script language='JavaScript'>
                function checkAnimal () {
                var values = ['1', '2', '4', '5'];
                jQuery("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", jQuery("#checkAnimalCheckbox").prop("checked"));

                 } 
</script>

Счастливые праздники, все!

Поделиться
1

Попробуй это:

$(function() {
  function checkAnimal () {
    var values = ['1', '2', '4', '5'];
    $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", $("#checkAnimalCheckbox").prop("checked"));
  }
});
Поделиться
  • 0
    Здравствуйте, я использовал ваш код вместо этого, но местная среда очень упряма! Пожалуйста, проверьте мой исправленный код выше :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню