Help with uncheck

Question

Help with uncheck

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a problem with my code. I'm new to jQuery. It's perfect, I could do almost everything I wanted, except for one thing I can not solve: I can not get it to uncheck if clicked again, getting like new.

The following is 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

asked by anonymous 12.10.2017 / 19:15

3 answers

Fullcalendar does not return all records JS code is not clickable on mobile devices

score 0 · Answer 1

The best way to solve your problem is to use the HTML "radio" 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>

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

score 0 · Answer 2

You can use $(this).toggleClass('checked'); to put 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><divclass="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>

score 0 · Answer 3

Do this by creating a variable that writes the value of the clicked option. In case, I created the variable current_value = 0; which 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 deselected and the variable returns to 0 .

The code looks 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>