star rating input radio

#1
colombo2003

Posted 28 December 2016 - 01:47

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Fiecare cu cel doare. Unii cu cutremurul, altii (eu) cu...

Am urmatoare problema si nu reusesc sa ii dau de cap.
Atunci cand fac click pe steluta (vad ca radio butonul se selecteaza daca il fac vizibil din css), nu imi apare alertul (de fapt alertul l-am pus de test; as vrea ca nr de stelute ingalbenite sa il pot salva intr-un fisier).

<!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="stars.css">
<script src=[url="https://code.jquery.com/jquery-1.12.4.min.js"]https://code.jquery.com/jquery-1.12.4.min.js[/url]"></script>
</head>

<body>
<span class="rating">
<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1">
<label for="rating-input-1-1" class="rating-star" name="rating-input-1"></label>
</span>
// aici de fapt aveam inca 4 inputuri si 4 labeluri: 1-2, 1-3, 1-4 si 1-5; vazand ca nu functioenaza am lasat doar una;

<script type="text/javascript">
if($(this).attr('type') == 'radio' && $(this).attr('checked') == 'checked') { alert('o steluta'); }
</script>
</body>
</html>

CSS:

.rating {
overflow: hidden;
display: inline-block;
font-size: 0;
position: relative;
}
.rating-input {
float: right;
width: 16px;
height: 16px;
padding: 0;
margin: 0 0 0 -16px;
opacity: 0;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
background-position: 0 0;
}
.rating-star,
.rating:hover .rating-star {
position: relative;
float: right;
display: block;
width: 16px;
height: 16px;
background: url('http://kubyshkin.ru/samples/star-rating/star.png') 0 -16px;
}
/* Just for the demo */
body {
margin: 20px;
}

Ca script am incercat si cu

if (document.getElementById().checked == true) { alert...; }

dar si asa, fara nici un rezultat.

Ce anume e gresit?

Multumesc

Back to top

#2
tigerheart

Posted 28 December 2016 - 03:35

Savage Member

Grup: Senior Members
Posts: 9,888
Înscris: 07.08.2008

Cu alert: http://stackoverflow...1231958/1773862
http://jsfiddle.net/bhpyk18w/

Back to top

#3
colombo2003

Posted 28 December 2016 - 16:53

Senior Member

Grup: Senior Members
Posts: 6,312
Înscris: 16.07.2008

Trebuie adaugat jquery 2.1.3 (pentru ca altfel nici in fiddle nu functioneaza).
Maestre, m-ai salvat inca o data! Multumesc, Sarbatori fericite si La multi ani!

PS. Se poate inchide!

Back to top

Anunturi

Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

star rating input radio

#1 colombo2003 Posted 28 December 2016 - 01:47

#2 tigerheart Posted 28 December 2016 - 03:35

#3 colombo2003 Posted 28 December 2016 - 16:53

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
colombo2003

Posted 28 December 2016 - 01:47

#2
tigerheart

Posted 28 December 2016 - 03:35

#3
colombo2003

Posted 28 December 2016 - 16:53