Develop Reference

Why does my jQuery toggle workaround not work?

Since I couldn't make it work with the jQuery toggle function I try to build a workaround which doesn't work as well. If I just go for removeClass onClick, it removes the class. But both the toggle and if..else logic won't work.
Where's my bug?
$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>

Your code looks Excellent !! you just need to prevent the bubble effect which causes trigger the handler 2 times , you can see more here bubble events
e.preventDefault()
$('.category-wrapper').click(function(e) {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
e.preventDefault(); // <-- this line your solution
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>

you can easily toggle a checkbox but you can't toggle a radio cause it checked just once. if you are planning to use multiple radios instead then you can use the following link: JSFiddle click to test the example.
// Multiple Radio Color Change Example:
JSFiddle
// Radio Example:
$(document).ready(function() {
$('#radio-example input:radio').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>
//Checkbox Example:
$(document).ready(function() {
$('#radio-example input:checkbox').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="checkbox" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>

The issue is that you have both a <label> and an <input> in your div, and the they both send a click event, which results in your function executing twice, nearly simultaneously. You can get around this by ignoring the click on the label:
$('.category-wrapper').click(function() {
if (event.target.nodeName !== "LABEL") {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>

$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
Think about your logic ... if hasClass ( remove class) ... else ( addClass )
Your script first check if $(this) hasClass and then remove it ... and then make "else" and addClass

With a UNCHECKED checkbox, how to filter out NSFW tagged divs to be hidden at all times but when checked ON, to follow the visibility rules?

This question is based on this Question/Answer:
Filter accurately with BOTH checkboxes AND dropdown menus at the same time
Hi!
(NOTE, the simplified question and code is in the codepen or the snippet below, here I'm just explaining the context.)
Image of the simplified question, for which I actually need the answer:
My reference image PHP gallery is progressing nicely: https://manu.mymaterial.org (Watch out, it includes NSFW material, Fine Art painting by Andrew Loomis, in the front page ATM.)
And that brings me to this question.
How can I have that "Display NSFW material" to NOT show ANY of the images that have the NSFW tag in them when the "Display NSFW material" checkbox is UNCHECKED, no matter what other filtering options I do?
I have a feeling that it is a simple if-statement in Javascript, but I'm uncertain where to put it exactly and if it breaks other things.
At the moment the NSFW checkbox displays ONLY the NSFW material (yellow box) and nothing else. This is not desired.
So, in other words, I have tags for all of the material to be shown in various ways - but now the NSFW tag should HIDE stuff when included into a div. Or in my case, it's just an image file that gets processed by PHP and into a div: Andrew_Loomis; Traditional_Characters_Realistic_Color_NSFW.jpg
Codepen project:
https://codepen.io/manujarvinen/pen/wvdzeQv
Thank you all, this is a fine place.
Image of my project thing:
var $filterCheckboxes = $('input[type="checkbox"]');
var $filtermenues = $('.grid1');
var filterFunc = function () {
var selectedFilters = [];
$filtermenues.find(":selected").each(function () {
var v = this.value;
if (selectedFilters.indexOf(v) === -1 && v)
selectedFilters.push(v);
});
$('.animal' && '.filterDiv')
.hide()
.filter(
function (_, a) {
var itemCat = $(a).data('category').split(' ');
if (itemCat.indexOf("showAll") > -1)
return;
return selectedFilters.every(
function (c) {
return itemCat.indexOf(c) > -1;
})
})
.show();
$filterCheckboxes.filter(':checked').each(function () {
var v = this.value;
if (selectedFilters.indexOf(v) === -1)
selectedFilters.push(v);
});
$('.animal' && '.filterDiv')
.hide()
.filter(
function (_, a) {
var itemCat = $(a).data('category').split(' ');
return selectedFilters.every(
function (c) {
return itemCat.indexOf(c) > -1;
})
})
.show();
}
$filterCheckboxes.on('change', filterFunc);
$('select').on('change', filterFunc);
body {
width: 100%;
text-align: center;
background-color: black;
color: white;
font-family: sans-serif;
}
.grid {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid1 {
width: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.filterDiv {
width: 100px;
height: 100px;
padding-top: 20px;
color: black;
font-weight: bold;
}
<!-- Help needed in this URL: https://stackoverflow.com/q/68334085/4383420 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=grid1>
<select>
<option value="">--</option>
<option value="violet">violet</option>
</select>
<select>
<option value="">--</option>
<option value="blue">blue</option>
</select>
<select>
<option value="">--</option>
<option value="yellow">yellow</option>
</select>
</div>
<div class=grid>
<label>VIOLET
<input type="checkbox" value="violet" />
<span class="checkmark"></span>
</label>
<label>BLUE
<input type="checkbox" value="blue" />
<span class="checkmark"></span>
</label>
<label>YELLOW
<input type="checkbox" value="yellow" />
<span class="checkmark"></span>
</label>
</div>
<div class=grid>
<div class="filterDiv" data-category="violet blue" style="background-color: blue">Tags: <br />violet <br />blue</div>
<div class="filterDiv" data-category="violet red MVP" style="background-color: red">Tags: <br />violet <br />red <br />MVP</div>
<div class="filterDiv" data-category="yellow NSFW MVP" style="background-color: yellow">Tags: <br />yellow <br />NSFW<br />MVP</div>
</div>
<div>
<label>Most Valuable Players (MVP)
<input type="checkbox" value="MVP" />
<span class="checkmark"></span>
</label>
</div>
<div>
<label>Display NSFW material also
<input type="checkbox" value="NSFW" />
<span class="checkmark"></span>
</label>
</div>
<div style="width:400px; text-align: left; margin: 60px auto;">
What I need:
<p>By default, NSFW material checkbox is OFF and YELLOW shouldn't be seen at all in ANY situation.</p>
<p>When NSFW material checkbox is checked, ALSO YELLOW should be seen, but follow rest of the rules.</p>
</div>

The code is overly complex, and hard to follow. For one, this bit
var v = this.value;
if (selectedFilters.indexOf(v) === -1 && v)
selectedFilters.push(v);
merely serves to avoid duplicates in the array. This means that it is more like a set, which is a data structure that avoids duplicates by itself. If you do selectedFilters = new Set(), then that entire block can be replaced by selectedFilters.add(this.value);
Queries "is this category contained in the selected filters" can then also be reduced from selectedFilters.indexOf(cat) === -1 to selectedFilters.has(cat). That way the code already starts to match much more the desired behaviour.
Furthermore, the single-letter variables should also be abolished, and be replaced by explanatory names. The code should also have more comments to explain what's going on.
Then there is the confusion of being able to select filters from both the menu and the checkboxes. I'm not sure how this should work, so I've just changed the code such that it groups them all together: a filter is active when it's either selected by the checkbox or the menu.
Finally there is the problem that the "NSFW allowed" is not really the same as filtering of the other categories. Because of that, I just created a separate variable for it, and removed it from the filter. And finally finally I added an extra call to filterFunc() so that things start out filtered (instead of waiting for the first change to the filter checkboxes/menus). This is the end result.
EDIT: Updated for the "MVP only" checkbox.
EDIT 2: Don't let the "MVP" checkbox show everything with the MVP tag.
EDIT 3: Flipped the condition to show items; they need all the tags now. The old code is left commented-out, so that anyone can revert this switch for themselves if they want.
var $filterCheckboxes = $('input[type="checkbox"]');
var $filtermenus = $('.grid1');
// Return the intersection of setA and setB.
// Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
function intersection(setA, setB) {
let _intersection = new Set()
for (let elem of setB) {
if (setA.has(elem)) {
_intersection.add(elem)
}
}
return _intersection
}
function isSuperset(set, subset) {
for (let elem of subset) {
if (!set.has(elem)) {
return false
}
}
return true
}
function filterFunc() {
var selectedFilters = new Set();
// Gather tags from the menus.
$filtermenus.find(":selected").each(function () {
if (this.value)
selectedFilters.add(this.value);
});
// Gather tags from the checkboxes.
$filterCheckboxes.filter(':checked').each(function () {
if (this.value)
selectedFilters.add(this.value);
});
console.log("selected filters:", [...selectedFilters]);
let mayShowNSFW = selectedFilters.has("NSFW");
selectedFilters.delete("NSFW");
let mustShowMVPOnly = selectedFilters.has("MVP");
selectedFilters.delete("MVP");
$('.filterDiv')
.hide()
.filter(
// Returns 'true' to show items, 'false' to hide them.
function (_, element) {
let itemCats = new Set($(element).data('category').split(' '));
// If the item has tag 'showAll', always show it.
if (itemCats.has("showAll"))
return true;
// If item is NSFW but that's not in the filters, hide the item
// regardless of other tags.
if (itemCats.has("NSFW") && !mayShowNSFW)
return false;
if (mustShowMVPOnly && !itemCats.has("MVP"))
return false;
// If there are no filters at all, just show everything.
if (selectedFilters.size == 0)
return true;
// If this item has all the tags, show it:
return isSuperset(itemCats, selectedFilters);
// If this item has any of the tags, show it:
// return intersection(selectedFilters, itemCats).size > 0;
})
.show();
}
$filterCheckboxes.on('change', filterFunc);
$('select').on('change', filterFunc);
filterFunc();

You can add this in your css stylesheet
.nsfw{
visibility: hidden;
}
And this should be in the head tag of your html page
<script>
$(document).ready(function () {
$('#nsfw').change(function () {
if (!this.checked)
// ^
$('.nsfw').css('visibility', 'hidden');
else
$('.nsfw').css('visibility', 'visible');
});
});
</script>
Your nsfw box should be something like this
<div class="filterDiv nsfw" data-category="yellow NSFW MVP" style="background-color: yellow">Tags: <br />yellow
<br />NSFW<br />MVP
</div>
Here is the checkbox
<div>
<label>Display NSFW material also
<input type="checkbox" value="NSFW" id="nsfw" />
<span class="checkmark"></span>
</label>
</div>

You can give a class to all nsfw images and then set their visibility to hidden in css. and when checkbox is checked you can set nsfw images visibility to hidden.

Custom selector wont click because of display property

So i have made a custom selector like
<div class="search">
<input class="custom-selector" type="text" autocomplete="off" >
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>
and whenever i focus on the input the class hidden(only has display:none;) gets removed, and on blur(unfocus) it gets added back
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
$(".custom-options").addClass("hidden");
})
On the next step i needed a function to onclick get the li value and copy it to the input ,but whenever i click on the li ,the input gets unfocused and the onclick function cant work on a display none,one solution i found was opacity 0 instead of display none for hidden class,is there more optimal and correct way to fix this issue?

Edit: You can add a timeout maybe?
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
setTimeout(function () { $(".custom-options").addClass("hidden") }, 350);
})
$('.custom-options > li').click(function(e) {
$('.custom-selector').val($(this).text());
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>

You could use a combination of focusable elements and the :focus-within pseudo-class to not lose focus.
$('.custom-options a').click(function (ev) {
const selected = ev.target.textContent;
$('.custom-selector').val(selected);
ev.target.blur();
});
.custom-options {
display: none;
}
.search:focus-within .custom-options {
display: block;
}
.custom-options a {
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options">
<li>
New York
</li>
<li>
Moscow
</li>
<li>
Baku
</li>
</ul>
</div>

Priority field in html form

I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.
The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field.
This is the HTML i am using for priority
` <input type="radio" id="1" class="priority">
<input type="radio" id="2" class="priority">
<input type="radio" id="3" class="priority">
<input type="radio" id="4" class="priority">
<input type="radio" id="5" class="priority">`
I am using spring MVC framework.
Any help would be appreciated

UPDATE: updated FIDDLE
add value attribute to the radio buttons like
<input type="radio" name="1" id="r1" value="a rating">
then some script to read the radio button values like:
var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr);
I've tried some workaround for the sake of "changing color" in this Fiddle
Added this html, to act as the radio buttons that changes color:
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
with this css, to take it under the radio buttons:
.circ{
height: 12px;
width: 12px;
border-radius: 50%;
background: gray;
display: inline-block;
position: relative;
bottom: 20px;
margin-left: 5px;
margin-right: 4px;
}
Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.
PS: You can't just edit radio button's background color, instead use background images

I am not sure if i understud your question correct, but if so this demo code (jsfiddle) might help.
(its just a demo, and would still have to be adapted for your needs)
It simply sets the color class on the Click event of every RadioButton.
CSS
.color1 {
background:red;
}
.color2 {
background:green;
}
.color3 {
background:yellow;
}
HTML
<div class="priority">
<input type="radio" name="1" id="1">
<input type="radio" name="1" id="2">
<input type="radio" name="1" id="3">
<input type="radio" name="1" id="4">
<input type="radio" name="1" id="5">
</div>
Script
$(function () {
$(".priority input").on("click", function () {
$(".priority").attr("class", "priority color" + this.id);
});
})
tested with Chrome 34+

As per your requirement you can use jQuery plugin Colourful rating system. It comes with good options so that you can set the color as required.
DEMO
example as follows:
the HTML
<ul id="rating">
<li>This is just a piece of crap</li>
<li>Nothing too new or interesting</li>
<li>Not bad, I like it</li>
<li>I would like to see more of this</li>
<li>This is the best thing I've seen</li>
</ul>
CSS
#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }
#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
box-shadow:0 0 5px #888; border-radius:40px; }
After we're done loading jQuery and the Color plugin, we're ready to use jQuery to now animate the circles to the right colour and display the text.
// Variable to set the duration of the animation
var animationTime = 500;
// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];
// Add rating information box after rating
var ratingInfobox = $("<div />")
.attr("id", "ratinginfo")
.insertAfter($("#rating"));
// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
$("#rating li a").each(function() {
if($(this).parent().index() <= nrOfRatings) {
$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
}
});
};
// Handle the hover events
$("#rating li a").hover(function() {
// Empty the rating info box and fade in
ratingInfobox
.empty()
.stop()
.animate({ opacity : 1 }, animationTime);
// Add the text to the rating info box
$("<p />")
.html($(this).html())
.appendTo(ratingInfobox);
// Call the colourize function with the given index
colourizeRatings($(this).parent().index());
}, function() {
// Fade out the rating information box
ratingInfobox
.stop()
.animate({ opacity : 0 }, animationTime);
// Restore all the rating to their original colours
$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});
// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
e.preventDefault();
alert("You voted on item number " + ($(this).parent().index() + 1));
});
for complete documentation and source code click HERE

Checkboxes/radiobuttons unresponsive in expandable list form

Edit to answer: OK, so it seems this problem has come up before. The key seems to be in the return false; statement in the js prepareList function. I commented it out and now the code works fine. For more information and a more complete answer, here is the previous version of the question.
EDIT: Here's a jsfiddle that reproduces the error.
I'm trying to make a form using the expandable list code found here, and my checkboxes and radio buttons are either unresponsive or glitchy. They both know they're being pressed, they change to the depressed image when I click on them, but they don't update their value. For radio buttons, I can click one and it works, but then the others in that group become unresponsive. I have a dummy php page to just print out the results of the form, but it doesn't appear to be receiving any data. NOTE: This is my first website project, there may be something completely obvious that I'm just missing.
Here's a sample of the HTML:
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
And here's the javascript for the list function:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
And the relevant CSS:
#listContainer{
margin-top:15px;
}
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}

The issue here is with event.preventDefault() in your code. It's keeping the checkboxes / radio buttons from performing their default behavior. Removing that entry will allow the input tags to function normally. But they will no longer trigger the expand and collapse functionality you're looking for.
You'll need to modify your JS to also listen for the click on the checkboxes. Here are some similar situations that may help you:
making on-click events work with checkboxes
clicking on a div to check / uncheck a checkbox