selección de casilla de verificación de jquery

Please refer the url

Here while selecting the check box the corresponding row is selected. I want to change that as

only one will be highlighted at a time.

If i select check box 2 then the check box 2 will be checked and this row only be highlighted and remaining check box should unchecked and remove the highlighting.

How do i change this. Please do the needful. Thanks

preguntado el 10 de marzo de 12 a las 11:03

Why cant you use Radio buttons instead? -

Considera usar .each() , when the user clicks a checkbox , use the .each loop to un-check all the others. -

What it should displaye when we click on 1,2,3,2 ? Or 1,2,3,3,2,3,1,1 ? -

3 Respuestas

I added the following to the click handler:

$('input.high').not(this).attr('checked', null).closest('tr').css('background-color', '#fff');


respondido 10 mar '12, 11:03

For small lists this will work, however, there will be a performance hit looping through all the "input.high" objects plus checking to see if the current one is not "this" one. If your list increases or is dynamic, you might want to consider a local variable instead. - Chris Gessler

@ChrisGessler You're absolutely right, but one step at a time :-) - T. Junghans

@TJ. - nice oneliner though :) - Chris Gessler

Aquí tienes ...

var currentRow;

$('.high').live('click', function(event) {
    if(currentRow) currentRow.css("background-color", "white");
    currentRow = $(this).closest('tr');
    currentRow.css("background-color", "orange");                


respondido 10 mar '12, 11:03

Please refer the fiddle now Here the high light is not removed for other radio buttons. How to remove this. Selected row only should highlighted. - Sam Hanson

Ahhh... the highlighted ROW needs to change. Gotcha. - Chris Gessler

No utilice .live() function it has been deprecated. Use .on() or .delegate() instead. Here is a simple solution to your problem

 $('.high').on('click', function(event) {          
        if ($(this).prop('checked')) {
             // if checked, reset all colors to white
             $("tr").css("background-color", "#ffffff");
             // find its parent row and change its color
             $(this).closest("tr").css("background-color", "#FFCC00");
        } else {
            // you only need to change its parent row in this case
            $(this).closest("tr").css("background-color", "#ffffff");



P.s. I have omitted the alternate row style in the row, to make things much simpler

respondido 10 mar '12, 11:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.