CODEWITHSUNDEEP
jqueryhtmlcss
user592638
user592638

Reputation:

how to select one element in jQuery

I am experimenting with a different kind of review system for my application. I have 5 radiobuttons with values 1 to 5, and every value represent a color.

If a user is going to review the movie "Batman: the dark knight", it would look something like this:

enter image description here

When a user clicks on a value, it changes the background-color. I am using jQuery to control this.

What the problem is: The user should only be able to choose one value and that only that value should change background-color, right now you change click any value and it change its background-color.

How can I do that in jQuery, any tips or ideas are welcome!

Here is a exempel in jsfiddle: http://jsfiddle.net/puWJZ/

HTML:

<label class="input-check ch1">
 <input id="#rb1" type="radio" value="1"   name="reviewbutton" /> Bad
</label>
<label class="input-check ch2">
 <input id="#rb2" type="radio" value="2"   name="reviewbutton" /> Acceptable
</label>
<label class="input-check ch3">
 <input id="#rb3" type="radio" value="3"   name="reviewbutton" /> Good
</label>
<label class="input-check ch4">
 <input id="#rb4" type="radio" value="4"   name="reviewbutton" /> Very good
</label>
<label class="input-check ch5">
 <input id="#rb5" type="radio" value="5"   name="reviewbutton" /> Excellent
</label>
<div class="box">POP UP!</div>

CSS:

.input-check {
    display: block;
    height:20px;
    padding:10px;
    width:90px;
    color:#EEEEEE;
    font-weight: 600;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #333333;
    margin:10px;
    cursor: pointer;
}
input {
    display:none;
}
.ch1:hover{background-color: #ba0012; cursor: pointer;}
.ch2:hover{background-color: #ba0099; cursor: pointer;}
.ch3:hover{background-color: #00ba88; cursor: pointer;}
.ch4:hover{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover{background-color: #f0b10b; cursor: pointer;}

jQuery:

$(document).ready(function(){
    $('.box').hide();
    /* Bad */
    $('.ch1').click(function(){
        $(this).css({'background-color' : '#ba0012'});
        $('.box').show();
    });
    /* Acceptable */
    $('.ch2').click(function(){
        $(this).css({'background-color' : '#ba0099'});
        $('.box').show();
    });
    /* Good */
    $('.ch3').click(function(){
        $(this).css({'background-color' : '#00ba88'});
        $('.box').show();
    });
    /* Very good */
    $('.ch4').click(function(){
        $(this).css({'background-color' : '#0bbdf0'});
        $('.box').show();
    });
    /* Excellent */
    $('.ch5').click(function(){
        $(this).css({'background-color' : '#f0b10b'});
        $('.box').show();
    });
});

Upvotes: 1

Views: 171

Answers (6)

zb&#39;
zb&#39;

Reputation: 8049

Mark labels using classes and set that classes same as in hover css

css:

.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

js:

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        e.stopPropagation();
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });
    $('label.input-check').click(function(e) {
        var $t = $(this);
        if ($t.attr('type') == 'radio') {
            return true;
        }
        $t.children().first().click();
    });
});​

demo

other way to solve it is to make input same size as parent and set opacity to 0:

js:

$(document).ready(function() {
    $('.box').hide();
    $('label.input-check input').click(function(e) {
        $('label.input-check').removeClass('checked');
        //the reason for next string it is just to make same code compatible with checkboxes
        //if not needed it ok to set $(this).parent().addClass('checked');
        $('label.input-check input:checked').parent().addClass('checked');
    });

});​​

in css remove input and set this:

label.input-check input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.ch1:hover,.ch1.checked{background-color: #ba0012; cursor: pointer;}
.ch2:hover,.ch2.checked{background-color: #ba0099; cursor: pointer;}
.ch3:hover,.ch3.checked{background-color: #00ba88; cursor: pointer;}
.ch4:hover,.ch4.checked{background-color: #0bbdf0; cursor: pointer;}
.ch5:hover,.ch5.checked{background-color: #f0b10b; cursor: pointer;}

demo2

Upvotes: 0

Josep
Josep

Reputation: 13071

I don't really like the way that you are doing it, you don't need to create a function for each label. But I think that what you want to do is use the jQuery not selector Let me propose you a better way to do this:

$(document).ready(function(){
    var myColors=new Array('#ba0012', '#ba0099', '#00ba88', '#0bbdf0', '#f0b10b');
    $('.box').hide();
    $('.input-check').click(function(){        
        $(this).css({'background-color' : myColors[$('.input-check').index($(this))]});
        $('.input-check').not($(this)).css({'background-color' : ''});
        $('.box').show();
    });
});

http://jsfiddle.net/puWJZ/7/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

I would completely remove the inline CSS and toggle a class on your buttons instead. You already have all the css colors in your :hover styles, simply adding selectors to include an active class would make it a lot cleaner as it is much simpler removing a class than it is storing and reverting inline css

CSS sample

.ch1:hover, .ch1.selected {background-color: #ba0012; cursor: pointer;}

JS to change class:

$('.input-check').click(function(){
   $('.input-check.selected').removeClass('selected');
   $(this).addClass('selected');

     /* other code when clicked*/
})

Upvotes: 1

dev
dev

Reputation: 3999

This is a very basic way of changing all the other colours back to their original colours.

$('.ch2, .ch3, .ch4, .ch5').css({'background-color' : '#333'});

http://jsfiddle.net/puWJZ/5/

Upvotes: 0

Brett Gregson
Brett Gregson

Reputation: 5913

As mentioned by the other answers, definitely go with one piece of code to handle the click event for all the buttons. Here I have added the bgcolor as a custom attribute to each radio button:

<input id="#rb1" type="radio" value="1"   name="reviewbutton" bgcolor="#ba0012"/> Bad

I have also added a class on all the input labels:

<label class="input-check ch1 rating_item">

We then check for a click on any of these elements, get the bgbolor from the custom attributed and set it on the clicked element (and reset all other elements)

$(document).ready(function(){
    $('.box').hide();
    $('.rating_item').click(function(){
        $('.rating_item').each(function(){
            $(this).css("background-color","#333333");
        });
        var this_bg_color = $(this).children().attr("bgcolor");
        $(this).css('background-color',this_bg_color);
        $('.box').show();
    });
});

http://jsfiddle.net/UxyWq/3/

Upvotes: 0

user1726343
user1726343

Reputation:

To reset the colors for the rest of the elements, just prepend:

$('.input-check').css('background-color',"");

to all your event handlers.

Here is a demonstration: http://jsfiddle.net/puWJZ/1/

Alternatively, you could add this event listener to the end of your code:

$('.input-check').click(function(){
    $('.input-check').not(this).css('background-color',"");
});

Here is a demonstration of the alternate approach: http://jsfiddle.net/puWJZ/3/

Upvotes: 2

Related Questions