We Keep Coding

How can I change the property of my css attributes?

I have the following css code :
input:checked + .selectablelabel .check {
visibility: hidden;
}
And I would like to modify using javascript the property of the attribute visibility and to set to visible using javascript.
I tried this :
$(document).on('click', '#selectlabelall', function () {
document.getElementsByClassName("input:checked + .selectablelabel .check").visibility = "visible";
});
But without any effects.
Could you help me please ?
Thank you very much !

Hey the way you are using is incorrect!
Use this instead :
$(document).on('click', '#selectlabelall', function () {
let elements =
document.getElementsByClassName("input:checked +
.selectablelabel .check");
for(element of elements) {}
element.style.visibility ="visible":
}
);

I'm not quite sure what your intent is for the full functionality, but here are my assumptions for your specs:
hide the label of any checked checkbox
show label of any unchecked checkbox
if, the "selectall" checkbox is checked, you should show the labels of the other checkboxes regardless of whether they are checked or not
If that's all true above, then you could handle all this in CSS:
input:checked + .selectablelabel .check {
visibility: hidden;
}
#selectlabelall:checked ~ .selectablelabel .check {
visibility: visible;
}
<input type="checkbox" id="selectlabelall">
<input type="checkbox">
<label class="selectablelabel">
<span class="check">one</span>
</label>
<input type="checkbox">
<label class="selectablelabel">
<span class="check">two</span>
</label>
<input type="checkbox">
<label class="selectablelabel">
<span class="check">three</span>
</label>

$(document).on('click', '#selectlabelall', function () {
var ele = document.getElementsByClassName("selectablelabel check")
var i = 0;
while(i < ele.length) {
ele[i].style.visibility = 'hidden'
i++
}
});
Adding the style attribute should solve your problem. Also try using the jQuery way to select the element since you are already using the library

Adding a class or style to a disabled button

I am disabling a button until atleast one checkbox has been selected like so:
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='button']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
My buttons initial state is disabled but I need it to be like faded out or opacity added to it, im not sure what the best approach would be either do it with adding a class or just adding CSS? im not really sure?

If you mean you want to adjust the appearance of a disabled button, you do that with a CSS attribute presence selector (input[type=button][disabled]) or a CSS :disabled pseudo-class selector (input[type=button]:disabled):
input[type=button][disabled] {
color: red;
opacity: 0.5;
}
/* or: */
input[type=button]:disabled {
color: red;
opacity: 0.5;
}
The attribute selector works because a disabled button has a disabled attribute, and an enabled one does not. But in modern code, I'd probably use :disabled instead.
Example:
var btn = $("#toggle");
setInterval(function() {
btn.prop("disabled", !btn.prop("disabled"));
}, 1000);
/* Here I've used each of the two possible options
to provide half of the styling you wanted.
You'd obviously just choose one of them and use
it to handle both parts of the styling.
*/
input[type=button][disabled] {
color: red;
}
input[type=button]:disabled {
opacity: 0.5;
}
<input type="button" value="This is enabled">
<input type="button" disabled value="This is disabled">
<input id="toggle" type="button" value="This one goes back and forth">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here is one way you can add the styling:
<button class="btn-disabled" disabled> Test </button>
button:disabled.btn-disabled {
opacity: 0.5;
}
$("button").addClass( "btn-disabled" );

Change image selected when radio button is selected

What is the simplest way to change the image selected (class=selected) when a form element is selected? I've tried several different methods (unsuccessfully) but my Javascript is a bit rusty so I could use some help.
I am displaying an image next to each set of radio buttons which depicts the value when hovered or selected. In addition, I've pre-selected a default value to be displayed initially (usually the most popular answer). The css ensures that the relevant images are displayed in a fixed position, and the z-index and opacity change in order to display the correct image. The only problem is that when the user clicks on a radio button it on, the value is correctly set to selected but the corresponding image is not being selected.
I have included the relevant snippets below and posted a fiddle with the full css here.
<style type="text/css">
.new li img {
opacity: 0;}
.new li.selected img {
z-index: 2;
opacity: 1;}
.new:hover li.selected img {
z-index: 0;}
.new li:hover img {
z-index: 2;
opacity: 1;}
</style>
<div class="new alternate_image">
<ul>
<li>
<img src="sports.png" />
<label><input type="radio" name="item1" value="Sports"/>Sports</label>
</li>
<li>
<img src="fashion.png" />
<label><input type="radio" name="item1" value="Fashion"/>Fashion</label>
</li>
<li class="selected">
<img src="city.png" />
<label><input type="radio" name="item1" value="City"/>City</label>
</li>
</ul>
</div>

The following will do the job. Though since it will affect all radio buttons, you may want to tweak the first selector (e.g. '.alternate_image input[type=radio]').
$('input[type=radio]').change(function() {
var name = this.name;
var self = this;
$('input[name=' + name + ']').each(function() {
$(this).closest('li').toggleClass('selected', this === self);
});
});
http://jsfiddle.net/nonplus/qF3P9/1/

Checkbox image label Select effect only applying on hover, not when checked

I have check boxes which I have images set for the labels, and I'm using code which applies an effect when hovered over. However when tested in a fiddle the hover effect stays when selected and doesn't show the actual check tick box, only issue with the fiddle is that this only works on the last checked not all checked.
However when I apply this to my site only the hover effect works, the effect doesn't stay on any selected and the tick boxes stay visible.
The fiddle: http://jsfiddle.net/Zgh24/1169/
The only differences between that in my code is that the DIV it is in also has classes, I'm using bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
So my issue is sort of 2, I have a Fiddle which sort of does what I want, and then the fiddle I do have doesn't full work when I implement it.
I'm assuming I possibly have some css which is conflicting with that I'm trying to do, but I don't see how or what.
Any help is very appreciated -Tom

You could use only CSS pseudo class :checked and targeting next sibling label:
input[type=checkbox]:checked + label img
Finally, you should use as CSS rules:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
DEMO jsFiddle
FYI, you could wish in some case to use instead of checkboxes radio buttons as in this jsFiddle:
http://jsfiddle.net/Zgh24/1173/
That could let you use persistant style on some element using only CSS with radio buttons hiddden:
http://jsfiddle.net/Zgh24/1174/

May be not sure.. the class .selected is used by bootstrap core and that style is applied to your label element.
Use your browser to see what style is applied.

How to change background-color of a "li" if I put the cursor in an input field inside the "li"? [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is it possible to set the background-color of the li when I put the cursor in a or b or c?
I have this list with 100 records and I want the hole row ("li") to show up in another color so it gets more easy to work with the list.
<li id=recordsArray_1>
<form medthod=post name=fr_1 id=fr_1>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_1 value=ok>
</form>
</li>
<li id=recordsArray_2>
<form medthod=post name=fr_2 id=fr_2>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_2 value=ok>
</form>
</li>
<li id=recordsArray_3>
<form medthod=post name=fr_3 id=fr_3>
<input type=text name=a> <input type=text name=b> <input type=text name=c>
<input type=submit name=b_3 value=ok>
</form>
</li>
.etc .... > 100

You can have a sibling element to the input elements and make it cover the li with background color on hover.
CSS
input[type=text]:focus~div {
background-color:red;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -1;
}
li {
position:relative;
}
jsfiddle

You can't do this with pure css, you'll need to use javascript / jQuery:
$("input[type='text']").focus(function(){
$("li").removeClass("background");
$(this).closest("li").addClass("background");
});
See: http://jsfiddle.net/HF5Tx/

Even though there is no parent selector, you have a hover state on the li triggered by the hover of the children (the hover bubbles).
One posibility is to use that state, and if you want to avoid the change when the cursor is on the li, but not on the inputs, just disable the hover event:
CSS
li {
position:relative;
z-index: 1;
pointer-events: none;
}
li:hover {
background-color: red;
}
input {
position: relative;
z-index: 2;
pointer-events: all;
}
fiddle

Is it possible to set the background-color of the "li" when I put the cursor in on of its children inputs?
No, unfortunately the :focus selector does not work on the ancestors of the focused element, so you cannot detect that. :active would, but does only flash in the moment of the click.
The :hover selector (applied to the li) could do it, assuming you're using mouse navigation it would have a similar effect - and also help while viewing the table, not only when filling out inputs. However, it doesn't work with keyboard-based navigation.
So you can only resort to JS (using jQuery for an example, same is easily achievable with native DOM):
var $lis = $("li");
$lis.find("input:text").focus(function(e) {
$lis.css("background-color", "none");
$(this).closest("li").css("background-color", "red");
});