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
Related
I have a question. I have a simple chekcbox that in html looks like
<label class="container__control--checkbox">
<input type="checkbox" checked="checked" id="presentation_full_screen" class="container__control" onchange="_handleMainLayout()" />
<span>CLICK</span>
</label>
So when I click checkbox I fire up this type script:
_handleMainLayout() {
const layoutContainer = <HTMLInputElement>document.getElementById("main_layout");
const hideCommunicationCheckbox <HTMLInputElement>document.getElementById("presentation_full_screen");
if (hideCommunicationCheckbox.checked) {
layoutContainer.removeAttribute("style");
} else {
layoutContainer.style.gridTemplateColumns = "1fr";
}
}
So what id does it sets template on main layout (id: main_layout) from 1 column to 2 columns depends on this if checkbox is selected, and well it works.
But I was wondering, there are those selectors in css :checked and not(). So thing is, element with id main layout is way up DOM tree, and question can I somehow get that element using those selectors or any any other css/scss trick and toggle this grid-template-colum?
something like
.container__control :checked {
//get div with ID and set its grid-template-colum
}
.container__control :not(:checked) {
//get div with ID and set its grid-template-colum
}
Or am I left with only JS solution?
You can absolutely use CSS only to do that. The "trick" is where to insert the <input> element. Thanks to label attribute for you don't need to have <input> and <label> near one from the other. However <input> must be placed before #main_layout and on same DOM "branch" in order to use General (~) or adjacent (+) sibling combinator.
#main_layout {
height: 20px;
background-color: red;
}
:checked + #main_layout {
background-color: blue;
}
<label for="checkox">Click me</label>
<input type="checkbox" name="" id="checkox" hidden>
<div id="main_layout"></div>
no need for :not() in this case
I'm currently building a form that has checkboxes wrapped inside of labels. We are doing this because we need to swap our the original checkbox for an image. However, when the checkbox is checked, we need to make the label have a border to give some user feedback.
Here is the setup of the labels/checkboxes
<div class="one_column">
<label for="fieldname2_1_cb0">
<input name="fieldname2_1[]" id="fieldname2_1_cb0" class="field depItem group required" value="Alloy Wheel(s)" vt="Alloy Wheel(s)" type="checkbox"> <span>Alloy Wheel(s)</span>
</label>
</div>
We have tried going about is using the following but obviously doesn't work
label input[type="checkbox"]:checked + label {
border: 5px solid blue;
}
Any help would be appreciated!
I have managed to the the first checkbox using the code supplied below
window.onload=function() {
document.querySelector('input[type="checkbox"]').addEventListener('change',
function() {
if (this.checked) {
this.parentNode.classList.add('border-blue');
} else {
this.parentNode.classList.remove('border-blue');
}
})}
However, it only changes the first checkbox... there are 10 in total all following the same structure as above
Using CSS, there is no way to select parent elements from child elements.
If you are allowed to use JavaScript, you can solve it this way:
document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
el.addEventListener('change', function() {
if (this.checked) {
this.parentNode.classList.add('border-blue');
} else {
this.parentNode.classList.remove('border-blue');
}
})
})
.border-blue {
border: 5px solid blue;
}
It will check for changes on input. If it is checked, a class will be added. Otherwise, the class will be removed.
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" );
I wrote a script to check checkbox when I am clicking on it's respective image.
Image have id like checkbox-img-1 and checkbox input have id like checkbox-1 for 1st pair of checkbox and image. For 2nd pair id's are checkbox-img-2 and checkbox-2 and so on.
So, whenever I click on image I want to check the respective checkbox. For few images the UI is getting updated but for few images it's not getting updated.
What is the possible problem? I searched a bit but all questions were doing mistake of having attr in place of prop.
My script is in pure javascript. I tried with jQuery but I am getting same bug.
I figured out that content which is not present or not yet displayed in front are not getting selected.
The javascript code is:
/* Check option on image click */
$(".option-check-img").click(function () {
var checkbox_img_id = $(this).attr("id");
var checkbox_id = checkbox_img_id.replace("checkbox-img", "checkbox");
if(document.getElementById(checkbox_id).checked)
{
document.getElementById(checkbox_id).checked = false;
var d = document.getElementById(checkbox_img_id);
d.className = "img-circle pointer";
/*$("#checkbox_id").prop("checked", false);
$("#checkbox_img_id").removeClass("img-border");
console.log(document.getElementById(checkbox_id));*/
}
else
{
document.getElementById(checkbox_id).checked = true;
var d = document.getElementById(checkbox_img_id);
d.className += " img-border";
/*$("#checkbox_id").prop("checked", true);
$("#checkbox_img_id").addClass("img-border");
console.log(document.getElementById(checkbox_id));*/
}
});
Any solution? Thank you.
Try to use prop() instead of attr()
JQuery Script not checking check-boxes correctly
Read docs for more info jQuery prop().
Are you sure you want to use js for this? You can do this just with css.
*, *:before, *:after {
font-family: sans-serif;
box-sizing: border-box;
}
label {
display: block;
margin-bottom: 20px;
cursor: pointer;
}
span:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
background: white; /* you can place your image url here */
border: 4px solid white;
border-radius: 3px;
box-shadow: 0 0 0 1px black;
}
input {
display: none;
}
input:checked + span:before {
background: black;
}
<label>
<input type="checkbox">
<span>Checkbox 1</span>
</label>
<label>
<input type="checkbox">
<span>Checkbox 2</span>
</label>
There is a pure-html solution (Fiddle):
<ul><li>
<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1"><img /></label>
</li>
<li>
<input type="checkbox" id="checkbox-2" />
<label for="checkbox-2"><img /></label>
</li></ul>
if you need to add styling to your images when checkbox is checked you can use css3 (Fiddle):
input:checked + label img{
border: 1px solid black;
}
input:not(:checked) + label img{
border: 1px solid green;
}
// If you want to hide the checkbox
input[type=checkbox] {
display: none;
}
You should build your html such the checkbox and the image are next to each other.
This approach is much more elegant and doesn't use unnecessary javascript.
$(".option-check-img").click(function() {
var $this = $(this);
var checkbox_img_id = $(this).attr("id");
var checkbox_id = checkbox_img_id.replace("checkbox-img", "checkbox");
if ($("#" + checkbox_id + ":checked").length) {
$("#" + checkbox_id).prop('checked', false);
$("#" + checkbox_img_id).removeClass("img-border");
$("#" + checkbox_img_id).addClass("img-circle pointer");
} else {
$("#" + checkbox_id).prop('checked', true);
$("#" + checkbox_img_id).removeClass("img-circle pointer");
$("#" + checkbox_img_id).addClass("img-border");
}
});
Converted your code to proper jQuery Code.
Assumption: ID is of your check-box element.
Make sure no elements have same ID in your DOM.
Updated code to remove alternate-classes too.
Thanks
your checkbox id's are not unique.
A different checkbox with the same id is getting checked / unchecked instead of the one you want to manupulate. getElementById / $('#id') will return only one element which ever it finds first.
for instance, in the link that you shared the option Party has a id of checkbox-24 but with the same id there are total of three checkboxes.
similarly for Music with a id of checkbox-27 there are again 3 instances of checkbox with that id.
Your script is correct, but the ids are not unique. Make the id's unique or use someother identifier or combination of identifiers to uniquely identify the checkbox which you want to manipulate.
the problem was with infinite loop. Without infinite loop its working. But still I want that infinite slider so I will try something different.
i have a image with checkbox, i used this code for Checking a checkbox by clicking an image...
<label for="img1"><img class="img" src="myimage.jpg" /></label>
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />
its working fine, my question is, i want when checking check box above image opacity will be 0.5 or display a extra div over this image and when Un check above image opacity return to 1.0 or remove that div if we use div, any idea.???
thanks
You can accomplish this using some advanced CSS selectors provided that the <label> is the checkbox. The ~ selector is called general sibling selector and will match all sibling after the element.
jsFiddle
CSS
input:checked ~ label {
opacity: 0.5;
}
HTML
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />
<label for="img1">
<img class="img" src="https://www.google.com.au/images/srpr/logo4w.png" />
</label>
Support
Support for :checked is only present for IE9 and above, if you need support for IE8 then you can you use a .checked class as use it in addition to the CSS3 :checked selector.
JS
$('#img1').click(function () {
$(this).toggleClass('checked');
});
CSS
input:checked ~ label,
input.checked ~ label {
opacity: 0.5;
}
For support < IE8 then you should use a more general JavaScript solution.
$('#img1').click(function () {
$('label[for=' + this.id + ']').toggleClass('checked');
});
label.checked {
opacity: 0.5;
}
$('.img').click(function() {
if ($('#img1').is(':checked'))
$(this).css('opacity', 0.5);
else
$(this).css('opacity', 1);
});
$('.img').click(function() {
$(this).css('opacity', $('#img1').is(':checked')?0.5:1.0);
});