RoR jQuery Проверить / снять отметку с определенных элементов

0

В настоящее время я создаю веб-страницу RoR. Я пытаюсь создать флажок, который помогает выбрать определенные опции в форме, когда будет установлен флажок. И когда флажок снят, он автоматически отключит выбранные параметры.

Например:

        <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' name='checkanimal' onclick='checkAnimal()'><br>
        </form>

И JavaScript:

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

В JavaScript без if (checked == false){checked = true}else{checked = false}, при выборе флажка CheckAnimal будут выбраны опции (1,2,4,5). Однако, если я добавлю код обратно, флажок не будет работать вообще.

Кстати, эти коды работают только в JSFiddle и не работают в моей локальной среде, и я понятия не имею, почему.

JSFiddle: http://jsfiddle.net/yddq6/

Все коды указаны в документе "_form.html.erb" и в Google CDN (jQuery 1.10.2) <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head>) также находится в файле.erb.

Пожалуйста, любезно помогите!

  • 0
    Большое спасибо за быстрое решение моей проблемы, ребята! Я бы хотел выбрать вас обоих как лучшие ответы. Оба решения работают отлично :) Я «лучше всего ответил» Джо, так как он опубликовал свое решение ранее. Еще раз спасибо за все. Действительно ценю это!
  • 0
    А вы, ребята, знаете, почему коды не работают в моей местной среде? Я использую chrome в 0.0.0.0:3000 для проверки функции, и она работает не только в JSFiddle. Коды находятся внутри "_form.html.erb". Цените свою волшебную работу!
Теги:
checkbox

2 ответа

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

Вместо того, чтобы настраивать два разных случая, почему бы вам просто не установить 4 флажка в тот же статус флажка, который вы пытаетесь сопоставить?

function checkAnimal() {
var values = ['1', '2', '4', '5'];
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked",
$("#checkAnimalCheckbox").prop("checked")); // Instead of true, pass the value of the CheckAnimal Checkbox
}

и добавьте ID в свой HTML, чтобы выделить специальный флажок.

    <input type='checkbox'ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'>

Здесь вам будет изменен JSFiddle: http://jsfiddle.net/yddq6/1/

Поделиться
0

Это потому, что в вашем коде checked не определен, он должен быть element.checked и вы также должны передать элемент в свою функцию:

<input type='checkbox' name='checkanimal' onclick='checkAnimal(this)'>

function checkAnimal(elem) {
      var values = ['1', '2', '4', '5'];
      if (elem.checked == false) {
          var checked = true
      } else {
          var checked = false
      }
      $("#list").find('[value=' + values.join('], [value=') + ']')
                .prop("checked", checked);
 }

Но я бы использовал .on() и .filter():

$('input[name="checkanimal"]').on('change', function() {
    $("#list input").filter(function() {
        return $.inArray(this.value, values) > -1;
    }).prop("checked", this.checked);
});

http://jsfiddle.net/yddq6/2/

Поделиться

Ещё вопросы

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