通过jQuery和checboxes管理表单的输入

Question

I have a group of checkboxes which represents rows from a code snippet. I'd love to select a portion of that code with just two clicks (on the first and last row of the code) of checkboxes, check the code in the middle and set two input fields with starting and ending line of the selection. Here's my code but it doesn't seem to work at all.

HTML CODE

<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 CODE

$('#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
}
});

and when i click a checkbox nothing happens. It's the first time I use jQuery so many things can be wrong. Just don't kill me.. :)

Answer 1

ID cannot be alone numeric.

Conventions for ID:

Must contain at least one character

Must not contain any space characters

Do NOT start an ID name with a number

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 2

Working Fiddle

HTML

added id to form as you were using id of form in js but not defined .

<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
    }
});

changed

var $id = $this.id;

to

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

Answer 3

You got an error in your jQuery code :

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

if $this is a jQuery object, $this.id is undefined. It should be

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

or

var $id=this.id;

Answer 4

I would recommend separating "box" from numeric id with an underscore (or such) for easy separation of prefix and actual numeric id, like this:

<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>

You can use

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

to check how many checkboxes are checked and take actions accordingly, something like this would make it:

$('#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);                                            
});    

I created a jsfiddle for you to test out http://jsfiddle.net/8j9eu/2/