Lets say we have the fallowing code:

Selected Seats
<input type="button" class="seat selected" value="a1">
<input type="button" class="seat selected" value="b2">
<input type="button" class="seat selected" value="c3">
<input type="button" class="seat" value="d4">
<input type="button" class="seat" value="e5">
<input type="button" class="seat" value="f6">

visit /
on selecting a1 and f6 in the above case all a1,b2,c3,d4,e5,f6 have be selected automatically

Lets say we have the fallowing code:

Selected Seats
<input type="button" class="seat selected" value="a1">
<input type="button" class="seat selected" value="b2">
<input type="button" class="seat selected" value="c3">
<input type="button" class="seat" value="d4">
<input type="button" class="seat" value="e5">
<input type="button" class="seat" value="f6">

visit http://jsfiddle/victornpb/7j8vj/
on selecting a1 and f6 in the above case all a1,b2,c3,d4,e5,f6 have be selected automatically

• javascript
• jquery
• html

Share Follow edited Jul 3, 2015 at 10:03 Parag Bhayani 3,33022 gold badges3232 silver badges5353 bronze badges asked Jul 3, 2015 at 7:25 user1887128user1887128 3122 silver badges77 bronze badges 7

• I don't see what's not working here? Maybe I'm temporarily blind. – Gustaf Gunér Commented Jul 3, 2015 at 7:29
• @Gustaf He wants that if you first select seat a1 and after that f6 all seats between are also selected. – Mivaweb Commented Jul 3, 2015 at 7:31
• 1 Ah! I though he said that that was happening and that it was the problem. Thanks for polishing my glasses @Mivaweb – Gustaf Gunér Commented Jul 3, 2015 at 7:31
• thanks @gustaf is there any possibility ? – user1887128 Commented Jul 3, 2015 at 7:37
• why you have multiple selected options in class? – Cyclotron3x3 Commented Jul 3, 2015 at 7:41

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

I've made some changes to your code... I think this can be a good beginning.

I added this function :

function selectAll(seats) {
seats.forEach(function(seat) {
    seat.className = seat.className + ' selected';
});
}

It sets the selected class to all the elements in the array

And I changed your seatClick function to this one :

function seatClick(seat) {
seat = (this instanceof HTMLInputElement ) ? this : seat;
var firstSelected;
var selectedSeats = [];
var thisInputHasAlreadyBeenSeen = false;
var confirmedSeats = [];
if (seat.classList.contains('reserved')==false) {

    if (seat.classList.toggle('selected')) {
        addSeat(document.getElementById('seats'), seat.value);
        $(".seat").each(function() {
            if(this != seat) {
            if(firstSelected == null && this.classList.contains('selected')) {
                firstSelected = this;
                selectedSeats.push(firstSelected);
                confirmedSeats = selectedSeats.slice();
            } else if (firstSelected) {
                if(this.classList.contains('selected')) {
                    selectedSeats.push(this);
                confirmedSeats = selectedSeats.slice();
                   }
                if(!this.classList.contains('reserved')) {
                selectedSeats.push(this);
                 }
            else{
                if(!thisInputHasAlreadyBeenSeen) {
                selectedSeats = [];
                firstSelected = null;
                } else {
                    return false;
                }
            }
            }
            } else {
                selectedSeats.push(this);
                confirmedSeats = selectedSeats.slice();
                if(firstSelected == null) {
                    thisInputHasAlreadyBeenSeen = true;
                    firstSelected = this;
                }
            }
        });
        if(confirmedSeats.length > 1) {
        selectAll(confirmedSeats);
        }
    } else {
        removeSeat(document.getElementById('seats'), seat.value);
    }

} else {
    alert("This seat is reserved!\nPlease select another seat");
    removeSeat(document.getElementById('seats'), seat.value);
    return;
}
}

Basically what it does:

There are two arrays : one for temporary seats (temporary array) (some may be not selected in some cases), and one for the seats that will be selected (actual array)

It loops through all your seats.

If it encounters a blank seat, it puts it inside a temporary array, if the actual array has already been started.

If it encounters a "selected" seat, it either start the actual array or confirm the temporary array data by copying it inside the actual array.

If it encounters a reserved seat, it stops looping...

jsfiddle example: https://jsfiddle/7J8vj/94/

Hope it helps you

A possible solution should be using the jQuery functions nextUntil() and add():

var $first;
var $last;
var loop = false;

$('input.seat').click(function() {

    // Reset the seats if you select a new seat after a range was already defined
    if($first !== undefined  && $last !== undefined) {
        $first = undefined;
        $last = undefined;
        $('.seat').removeClass('selected');
        loop = false;
    }

    // Set first seat
    if($first === undefined) {
        $first = $(this);
        $first.addClass('selected');
    } else {
        // Set last seat
        if($last === undefined) {
            $last = $(this);
            loop = true;
        }
    }

    // Loop over all seats between first and last
    if(loop) {
        $('.seat').removeClass('selected');
        if(!$(this).hasClass('reserved'))
            $first.nextUntil($last,':not(.reserved)').andSelf().add($last).addClass('selected');
    }
});

What this code does is take the first selected seat, after that take all other elements until the last-seat. But the last seat also needs to be added to your list so you need to add this last seat using the add() function.

You still need to do some checkup, like for example if one seat is already reserved in this range, you have to exclude it.

Short example in jsfiddle

You should apply rowid to the seats row, so when user clicks on any two seats, and if both matches then it should select all seats in between them

Something like this should work. You get the clicked index, loop through the seats and if the clicked index is larger than the current index you run the addSeat() function. I added jQuery to make life easier.

var clickedIndex = $( ".seat" ).index( this );
$('.seat').each(function(index){
     if(!$(this).hasClass('selected') && clickedIndex > index){
         addSeat($('#seats'), $(this).val());
     }             
});

I have made kind of prototype. Logics can be made around it.

I have used nextUntil as some of the above answers.

Added a div with class .row

 $(".row").find('.a1.selected').nextUntil(".selected").css({"color": "red", "border": "2px solid red"});

Fiddle demo

i ve made a pure js solution that works for me.

add these 3 functions:

function mapSeats(){
    return document.getElementsByClassName("seat");
}

function findIndex(object,value){
    for(i=0;i<object.length;i++){
        if(object[i].value==value)
            return i;
    }
    return null;
}

function isSelected(element){
    if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" selected ") > -1 )
        return true;
    else
        return false;
}

and this is is the seatClick:

var start= end = -1;

//called everytime a seat is clicked
function seatClick() {

    if (this.classList.contains('reserved')==false) {


        if(start == -1)
            start = this.value;
        else if(end == -1)
            end = this.value;

        if(start != -1 && end != -1){

            seats = mapSeats();

            console.log(seats);

            indexS =  findIndex(seats,start);
            indexE = findIndex(seats,end);

            console.log(indexS,indexE);

            if(indexE >= indexS){
                for(i = indexS+1; i< indexE ; i++){
                    if (!isSelected(seats[i])) {

                        addSeat(document.getElementById('seats'), seats[i].value);
                        seats[i].classList.toggle('selected');
                    } else {

                        removeSeat(document.getElementById('seats'), seats[i].value);
                        seats[i].classList.toggle('selected');
                    }
                }
            }
            start = end =  -1; 
        }

        if (this.classList.toggle('selected')) {
            addSeat(document.getElementById('seats'), this.value);
        } else {
            removeSeat(document.getElementById('seats'), this.value);
        }

    } else {
        alert("This seat is reserved!\nPlease select another seat");
        removeSeat(document.getElementById('seats'), this.value);
        return;
    }
}

my fiddle jsfiddle

hope this will help :)