Help with uncheck

Asked

Viewed 25 times

0

I have a problem with my code. I’m new to jQuery. He’s perfect, I was able to do almost everything I wanted, except for one thing I can’t fix: I can’t get him to clear if clicked again, getting like new.

Follow the code below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Pontos</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <style>
            .rating {
                overflow: hidden;
                display: inline-block;
                position: absolute;
                font-size:18px;
                color: #000000;
            }
            .rating-star {
                padding: 0 1px;
                margin: 0;
                cursor: pointer;
                display: block;
                float: right;
            }
            .rating-star:after {
                position: relative;
                font-family: FontAwesome;
                content:'\f1db';
            }

            .rating-star.checked ~ .rating-star:after,
            .rating-star.checked:after {
                content:'\f111';
            }

            .rating:hover .rating-star:after {content:'\f1db';}

            .rating-star:hover ~ .rating-star:after, 
            .rating-star:hover:after {
                content:'\f111' !important;
            }


            /* Just for the demo */
            body {
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="rating">
            <span class="rating-star" data-value="5"></span>
            <span class="rating-star" data-value="4"></span>
            <span class="rating-star" data-value="3"></span>
            <span class="rating-star" data-value="2"></span>
            <span class="rating-star" data-value="1"></span>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
        $('.rating-star').click(function() {
            $(this).parents('.rating').find('.rating-star').removeClass('checked');
            $(this).addClass('checked');

        });
        </script>
    </body>
</html>
jquery

3 answers

0

The ideal solution to your problem is the use of HTML "radio" type elements.

For example:

<fieldset class="rating">
    <input type="radio" name="rating" value="5" />
    <input type="radio" name="rating" value="4" />
    <input type="radio" name="rating" value="3" />
    <input type="radio" name="rating" value="2" />
    <input type="radio" name="rating" value="1" />
</fieldset>

This way in Javascript you can search for the selected element as follows:

$('.rating :input').each(function (index,element) {
    if ($(element).is(':checked')) {
        value = $(element).val();
    }
});

  • Thank you, I tried at first as "radio", but unfortunately I could not get the result I wanted, I could not completely edit the radio buttons, I do not know if for lack of experience and knowledge. The buttons when marked at the time of printing they presented the natural image of them differing, completely from the design of the document. More anyway thank you very much, I will study more the buttons "radio".

0

Do this by creating a variable that saves the value of the clicked option. In this case, I created the variable current_value = 0; that will have the initial value 0.

When an option is clicked, this variable will receive the corresponding clicked value. If the same option is clicked again, all options are unchecked and the variable goes back to 0.

The code went like this:

current_value = 0;
$('.rating-star').click(function(){
	clicked_value = $(this).attr("data-value");
	if(current_value != clicked_value){
        $('.rating .rating-star').removeClass('checked');
        $(this).addClass('checked');
		current_value = clicked_value;
	}else{
        $('.rating .rating-star').removeClass('checked');
		current_value = 0;
	}
	$("#teste").html(current_value); // só exemplo
});
.rating {
	overflow: hidden;
	display: inline-block;
	position: absolute;
	font-size:18px;
	color: #000000;
}
.rating-star {
	padding: 0 1px;
	margin: 0;
	cursor: pointer;
	display: block;
	float: right;
}
.rating-star:after {
	position: relative;
	font-family: FontAwesome;
	content:'\f1db';
}

.rating-star.checked ~ .rating-star:after,
.rating-star.checked:after {
	content:'\f111';
}

.rating:hover .rating-star:after {content:'\f1db';}

.rating-star:hover ~ .rating-star:after, 
.rating-star:hover:after {
	content:'\f111' !important;
}


/* Just for the demo */
body {
	margin: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="rating">
    <span class="rating-star" data-value="5"></span>
    <span class="rating-star" data-value="4"></span>
    <span class="rating-star" data-value="3"></span>
    <span class="rating-star" data-value="2"></span>
    <span class="rating-star" data-value="1"></span>
</div>
<!-- abaixo é só para mostrar o valor clicado -->
<br />
Opção atual: <b id="teste">0</b>

  • Thank you, it also worked as the first option of friend Sergio, not needing to touch the css. Thank you very much the idea of creating the variable by assigning a value, really opened a new field of ideas and possibilities for my project.

  • @Erickfontes You’re welcome! Nice of you to help. Abs!

  • Ask this assigned value, if I add another item of this below, would they add up or be independent of each other? if yes, I could work with this value freely for other functions right?

  • @Erickfontes For each thing would have to create a different variable.

0

You can use $(this).toggleClass('checked'); to place or remove the class as a switch.

Example:

$('.rating-star').click(function() {
  $(this).siblings().removeClass('checked');
  $(this).toggleClass('checked');
});
.rating {
  overflow: hidden;
  display: inline-block;
  position: absolute;
  font-size: 18px;
  color: #000000;
}

.rating-star {
  padding: 0 1px;
  margin: 0;
  cursor: pointer;
  display: block;
  float: right;
}

.rating-star:after {
  position: relative;
  font-family: FontAwesome;
  content: '\f1db';
}

.rating-star.checked~.rating-star:after,
.rating-star.checked:after {
  content: '\f111';
}

.rating:hover .rating-star:after {
  content: '\f1db';
}

.rating-star:hover~.rating-star:after,
.rating-star:hover:after {
  content: '\f111' !important;
}


/* Just for the demo */

body {
  margin: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div class="rating">
  <span class="rating-star" data-value="5"></span>
  <span class="rating-star" data-value="4"></span>
  <span class="rating-star" data-value="2"></span>
  <span class="rating-star" data-value="3"></span>
  <span class="rating-star" data-value="1"></span>
</div>

  • 1

    Thank you very much, it worked perfectly, exactly what I needed. thank you very much.

  • @Erickfontes great! If you want you can click to mark the answer as accepted.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.