Управление входами форм через jQuery и checboxes

Question

У меня есть группа флажков, которая представляет строки из фрагмента кода. Я хотел бы выбрать часть этого кода всего двумя щелчками (в первой и последней строке кода) флажков, проверить код в середине и установить два поля ввода с начальной и конечной строкой выбора. Вот мой код, но он не работает вообще.

HTML КОД

<div id="example">  
    <input type="checkbox" name="box1" id="box1"> 
    <label for="box1"> code line 1 </label> 
    <input type="checkbox" name="box2" id="box2"> 
    <label for="box2"> code line 2 </label> 
    <input type="checkbox" name="box3" id="box3"> 
    <label for="box3"> code line 3 </label> 
    <input type="checkbox" name="box4" id="box4"> 
    <label for="box4"> code line 4 </label> 
    <input type="checkbox" name="box5" id="box5"> 
    <label for="box5"> code line 5 </label> 
</div> 
<form name="addhint" method="post" action=""> 
    <input type="hidden" name="start" value="0"> 
    <input type="hidden" name="stop" value="0"> 
    [...] 
</form> 

Jquery КОД

$('#example input:checkbox').click(function() { 
var $this = $(this); 
var $id= $this.id; 
if ($this.is(':checked')) { 
    if ($('#form input[name=start]').val() == 0) { 
     $('#form input[name=start]').val($id); 
    } 
    else { 
     var $start= $('input[name=start]').val(); 
     if ($id - $start > 1) { 
      for ($i = $start+1; $i < $id; $i++) { 
       $('#example input[id=box'+$i+']').attr('checked', true); 
       $('#example input[id=box'+$i+']').attr('disabled', 'disabled'); 
      } 
      $('#form input[name=stop]').val($id); 
     } 
    } 
} else { 
     // do other stuff 
} 
}); 

и когда я нажимаю флажок ничего не происходит. Это первый раз, когда я использую jQuery, поэтому многие вещи могут быть неправильными. Просто не убивайте меня .. :)

Answer 1

Я рекомендовал бы отделяя «окно» от числового идентификатора подчеркивания (или, например) для легкого разделения префикса и фактического числового идентификатора, как это:

<div id="example">  
    <input type="checkbox" name="box_1" id="box_1"> 
    <label for="box_1"> code line 1 </label> 
    <input type="checkbox" name="box_2" id="box_2"> 
    <label for="box_2"> code line 2 </label> 
    <input type="checkbox" name="box_3" id="box_3"> 
    <label for="box_3"> code line 3 </label> 
    <input type="checkbox" name="box_4" id="box_4"> 
    <label for="box_4"> code line 4 </label> 
    <input type="checkbox" name="box_5" id="box_5"> 
    <label for="box_5"> code line 5 </label> 
</div> 
<form name="addhint" method="post" action=""> 
    <input type="text" name="start" id="start" value="0"> 
    <input type="text" name="stop" id="stop" value="0"> 
</form> 

Вы можете использовать

$('#example input[type="checkbox"]').filter(':checked').size() 

, чтобы проверить, сколько флажков проверяются и принять меры соответственно, что-то, как это будет сделать это:

$('#example input[type="checkbox"]').change(function() { 
    var count_checked = $('#example input[type="checkbox"]').filter(':checked').size() 
    , start 
    , stop; 

    $('#example').find('[disabled="disabled"]').removeAttr('disabled'); 

    if (count_checked > 1) { // start and stop selected 
     var id1 = $('#example input:checkbox').filter(':checked').first().attr('id').split('_')[1] 
      , id2 = $('#example input:checkbox').filter(':checked').last().attr('id').split('_')[1]; 

     start = Math.min(id1, id2) 
     stop = Math.max(id1, id2); 

     for (i=start+1; i<stop; i++) { // loop through checkboxes between start and stop 
      $('#box_'+i).attr('checked','checked').attr('disabled','disabled'); 
     } 

    } else if (count_checked == 1) { // only start selected 
     start = $('#example input:checkbox').filter(':checked').first().attr('id').split('_')[1]; 
     stop = $('#example input:checkbox').last().attr('id').split('_')[1]; 
    } else { // none selected 
     start = 0; 
     stop = 0; 
    } 

    $('#start').val(start); 
    $('#stop').val(stop);            
});  

Я создал jsfiddle для вас, чтобы проверить http://jsfiddle.net/8j9eu/2/

Answer 2

ID не может быть одиноким числовым.

конвенции для ID:

должен содержать по крайней мере один символ

не должен содержать каких-либо пробелов

Не начинайте имя идентификатора с номером

Try :

$('#example input:checkbox').click(function() { 
var $this = $(this); 
var $id= this.id; 
$id = $id.substr(3);//because you have id like box1 so remove box and get 1 
if ($this.is(':checked')) { 
    if ($('#form input[name=start]').val() == 0) { 
     $('#form input[name=start]').val($id); 
    } 
    else { 
     var $start= $('input[name=start]').val(); 
     if ($id - $start > 1) { 
      for ($i = $start+1; $i < $id; $i++) { 
       $('#example input[id=box'+$i+']').attr('checked', true); 
       $('#example input[id=box'+$i+']').attr('disabled', 'disabled'); 
      } 
      $('#form input[name=stop]').val($id); 
     } 
    } 
} else { 
     // do other stuff 
} 
}); 

Answer 3

Working Fiddle

HTML

добавлен идентификатор в форме, как вы используете идентификатор формы в JS, но не определена.

<form id="form" name="addhint" method="post" action=""> 

JS

$('#example input:checkbox').click(function() { 
    var $this = $(this); 
    var $id = this.id; //change here 
    if ($this.is(':checked')) { 
     if ($('#form input[name=start]').val() == 0) { 
      $('#form input[name=start]').val($id); 
     } else { 
      var $start = $('input[name=start]').val(); 
      if ($id - $start > 1) { 
       for ($i = $start + 1; $i < $id; $i++) { 
        $('#example input[id=' + $i + ']').attr('checked', true); 
        $('#example input[id=' + $i + ']').attr('disabled', 'disabled'); 
       } 
       $('#form input[name=stop]').val($id); 
      } 
     } 
    } else { 
     // do other stuff 
    } 
}); 

изменил

var $id = $this.id; 

в

var $id = this.id; //or you can use var $id = $this.attr('id'); 

Answer 4

Вы получили ошибку в коде JQuery:

var $this = $(this); 
var $id= $this.id; 

если $this - объект jQuery, $this.id не определен.Он должен быть

var $id=$this.attr('id'); 

или

var $id=this.id;