We Keep Coding

How to know if a checkbox is checked onmouseover corresponding label

I want to perform certain actions when hovering over checkbox-labels, but only when the checkboxes are checked.
How can I retrieve that information?
HTML
<input clrcheckbox="" type="checkbox" id="checks">
<label for="checks">Check</label>
JS
document.querySelector('label').onmouseover = () => {
//so here should be something like:
//if(checkbox is checked) {console.log('checked')}
console.log('over');
}

Here a solution with jQuery
<input clrcheckbox="" type="checkbox" id="checks">
<label for="checks">Check</label>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
$(document).ready(function(){
var isChecked = function(){
if ($('#checks').filter(':checked').length > 0){
console.log('Do some action')
}
}
$('#checks').mouseover(isChecked)
$('label').mouseover(isChecked)
})
</script>
https://codesandbox.io/s/strange-sunset-nkq5q

Show/hide on checkbox click does not work consistently

I am building an inspection app to walk an inspector through a house with context-relevant questions based on answers. I am having inconsistent success with using checkboxes to show/hide div content.
I have simplified my problem down to a few very basic lines of code that I can't seem to troubleshoot.
<input type="checkbox" name="cbReplaceOrRepair_0" value="Replace" id="cbReplaceOrRepair_0" onclick="showReplaceRoof()">Replace
<div class="dvRoofReplace" id="dvReplaceRoof" style="display:none">"Replace" option is checked</div><br>
<input type="checkbox" name="cbReplaceOrRepair_1" value="Repair" id="cbReplaceOrRepair_1" onclick="showDvConfirmRepairability()">Repair
<div class="dvRoofRepair" id="dvConfirmRepairability" style="display:none">"Repair" option is checked</div>
<script type="text/javascript">
function showReplaceRoof() {
var dvReplaceRoof = document.getElementById("dvReplaceRoof");
dvReplaceRoof.style.display = cbReplaceOrRepair_0.checked ? "block" : "none";
}
function showDvConfirmRepairability() {
var dvRoofRepair = document.getElementById("dvRoofRepair");
dvRoofRepair.style.display = cbReplaceOrRepair_1.checked ? "block" : "none";
}
</script>
My example shows one checkbox that works to show/hide a div and another on that does not work. Can anyone tell me what I'm doing wrong?
Also, this is my first question on here after literally years of looking up questions so I'll apologize in advance in case I messed up any of the posting protocols.
https://codepen.io/stephenskrocki/pen/EGoYaB

You access the element incorrectly.
The id of the second hidden element is id="dvConfirmRepairability.
Use var dvRoofRepair = document.getElementById("dvConfirmRepairability");
Hope this helps!!

Since there is only one wanted option, instead of checkbox I would use radio buttons:
HTML Markup:
<style>label > span {display: none;} /* hide notes by default */</style>
<label for="replace">Replace
<input type="radio" name="radio" id="replace" onchange="radio()" />
<span class="note">"Replace" option is checked</span>
</label>
<label for="repair">Repair
<input type="radio" name="radio" id="repair" onchange="radio()" />
<span class="note">"Repair" option is checked</span>
</label>
javaScript:
<script>
function radio() {
var myRadio = document.querySelectorAll('input[name="radio"]'); // get radio
var myNotes = document.querySelectorAll('.note'); // get notes
if (myRadio[0].checked === true) { // if the first radio checked
myNotes[0].style.display = 'inline-block'; // show first note
myNotes[1].style.display = 'none'; // hide the second
}
else { // if not do the apposite
myNotes[0].style.display = 'none';
myNotes[1].style.display = 'inline-block';
}
}
</script>
Hope it help you!

javascript - onchange/onclick function not working on checkbox

I am trying to trigger onclick function by checkbox and link. Here is Demo which works fine. But If I make change by writing onclick/onchange inside checkbox its not working.:
<input type="checkbox" id="mycheckbox" onclick="myChange();"/>
If I call like this then it works fine:
<input type="checkbox" id="mycheckbox">
document.getElementById('mycheckbox').onclick = function(){
myChange();
};
Not working :( I wanted to work in Javascript only. Not Jquery What is the reason myChange() not being called from inside input tag

Check Here your updated code works.
function myChange(){
var temp = document.getElementById('mycheckbox');
document.getElementById('container').style.display = temp.checked ? 'block' : 'none';
};
document.getElementById('loginlink').onclick = function(){
if (document.getElementById('mycheckbox').checked) {
document.getElementById('mycheckbox').checked = false ;
myChange();
} else {
document.getElementById('mycheckbox').checked = true ;
myChange();
}
}
#container {
display: none;
}
<div id="container">Check Box is Checked</div>
<br><br>
<label>
<input type="checkbox" id="mycheckbox" onclick="myChange()"/>
Show/hide
<a href="javascript:void(0)" id="loginlink" >Click Me</a>
</label>
Check Fiddle.

Control Radio Buttons with a Checkbox

I'm using a CMS that hides form elements behind tags, because of some system quirks I've had to set up a checkbox that controls the radio buttons so if the checkbox is ticked the "yes" radio button is selected if not the "no" is selected. I also want the radio buttons to have option "no" checked by default but I don't have control over the line of code for the radio buttons.
I found some Javascript that does a small part of this but I want to integrate it into the jQuery that displays and hides content when the box is ticked.
Here's what I have so far:
$('#checkbox1').change(function() {
$('#content1').toggle("slow");
});
The Javascript I have is this:
function ticked(){
var ischecked = document.getElementById("checkbox").checked;
var collection = document.getElementById("hideradio").getElementsByTagName('INPUT');
if(ischecked){collection[0].checked = true;}else{collection[0].checked = false;}
}
Can you please help write a version of the Javascript but integrate with my jQuery?
Thanks,

You can try this, I assume your html as like this.
<input type="checkbox" id="checkbox1" /> Check Box
<div id="content1" >
Some Content <br />
Some Content <br />
Some Content <br />
Some Content
</div>
<div id="hideradio">
<input type="radio" name="rgroup" value="yes" /> Yes
<input type="radio" name="rgroup" value="no" /> No
</div>
JQuery
$(function(){
$('#hideradio input[type=radio][value=no]').attr('checked',true);
$('#content1').hide();
});
$('#checkbox1').on('change', function() {
$('#content1').toggle("slow");
var self = this;
if(self.checked)
$('#hideradio input[type=radio][value=yes]').attr('checked',true);
else
$('#hideradio input[type=radio][value=no]').attr('checked',true);
});
A Quick DEMO

Try this code
​
$(function(){
$('#checkbox1').on('click' , function() {
var isChecked = $(this).is(':checked');
if(isChecked){
$('#radio1').attr('checked' , true);
$('#content1').toggle("slow");
}
else{
$('#radio1').attr('checked' , false);
}
});
});​
Check [FIDDLE]

If I don't understand correctly then let me know.
I don't know your HTML code so I provide one
<form>
<input type="checkbox" name="test_ck" id="test_ck" />
<br/>
<input type="radio" name="test_radio" id="test_radio" />
</form>
<div id="content"> A content !!! </div>
and javascript jquery
$(function(){
$("#test_ck").on("change", function(){
$("#test_radio").prop("checked", $(this).is(":checked"));
$("#content").toggle("slow");
});
});
Example -> jsfiddle
UPDATED jsfiddle
http://jsfiddle.net/6wQxw/2/

jsfiddle
$(document).on('change', '#checkbox', function() { toggle(this); });
var toggle = function(obj) {
var checked = $(obj || '#checkbox').is(':checked');
$(':radio[value=no]').prop('checked', !checked);
$(':radio[value=yes]').prop('checked', checked);
$('#content').toggle(checked);
}
toggle();

This is a pure JavaScript solution, no need to use jQuery:
<body>
<label for="a">Male</label>
<input type="radio" id="a">
<br/>
<label for="b">Female</label>
<input type="radio" id="b">
<script type="text/javascript">
var nodes = document.querySelectorAll("input[type=radio]");// get elements
var arr = Array.prototype.slice.call(nodes); // convert nodes to array for use in forEach
arr.forEach(function(obj){
obj.addEventListener("change",function(e){
arr.forEach(function(obj){
obj.checked = false;//make other radio false
});
this.checked = true;// make this radio ture
});
});
</script>
</body>

How to apply checkbox with functions in javascript?

How to apply checkbox with functions in javascript?
How to hide post/object with specific tags when checkbox is unchecked?
I just need to know how to put functions for the checkbox to be automatically check upon opening the page and the checkbox to hide posts/objects with a specific tag on them. Is it correct to apply--
display:none
or--
.structural {
position:absolute;
left:-9999px;
}
--that I've found during research?
This was as far as I could go considering my lack of skills:
<input
type="checkbox"
name="mycheckbox"
value="yes"
onclick=" CheckboxChecked(this.checked,'checkboxdiv')"
</div>
</div>
<script type="text/javascript">
CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv');
</script>

If I understood your question correctly, you are attempting to hide/show a group of elements when a checkbox is checked/unchecked. This should be enough to get you going:
http://jsfiddle.net/HsCVq/
HTML:
<div class="hideWhenChecked">hide text</div>
<div>dont hide text</div>
<div class="hideWhenChecked">hide text</div>
<div>dont hide text</div>
<br />
<input type="checkbox" id="myCheckBox" />
JavaScript:​
document.getElementById('myCheckBox').addEventListener('click', function () {
var checked = this.checked;
var elementsToHide = document.getElementsByClassName('hideWhenChecked');
if (checked) {
// hide each element
} else {
// show each element
}
});​
I'd suggest looking into a javascript framework such as jQuery to make this code a lot simpler.

With jQuery
Something like this is pretty trivial with jQuery:
$("form").on("click", ":checkbox[name^='toggle_']", function(event){
$( "#" + event.target.name.split('_')[1] )
.toggle( event.target.checked );
});
But you shouldn't use jQuery just for something like this - that would be overkill.
Old-fashioned JavaScript, the way your Grandfather did it.
Here's a quick implementation (tested in IE7+). It works by extracting the corresponding element to hide from the name of the checkbox being clicked.
<form name="myform">
<input name="toggle_checkBox" type="checkbox" checked />
<div id="checkBox">
If checked, you'll see me.
</div>
</form>
This checkbox, when clicked will hide the DIV below it.
var myform = document.forms.myform;
var inputs = myform.getElementsByTagName("input");
function toggleElement () {
var e = event.target || window.event.srcElement;
var display = e.checked ? "" : "none" ;
document.getElementById( e.name.split('_')[1] ).style.display = display;
}
for ( var i = 0; i < inputs.length; i++ ) {
var chk = inputs[i];
if ( chk.type == "checkbox" && /^toggle_/.test( chk.name ) ) {
if ( chk.addEventListener ) {
chk.addEventListener("click", toggleElement, false);
} else if ( chk.attachEvent ) {
chk.attachEvent("onclick", toggleElement);
}
}
}
Demo: http://jsbin.com/ibicul/5

Have a look at this
HTML:
<form>
<!-- for keeping checkbox checked when page loads use checked="checked" --->
<input type="checkbox" name="check" onclick="toggle(this.form.check);" checked="checked">
<input type="checkbox" name="check1"/><br>
<br>
</form>
<!-- the id of this element is used in script to set visibility --->
<div id="text" style="visibility:hidden">
My visibility is based on checkbox selection
</div>
Script
<script>
function toggle(check)
{ if(!check.checked)
{
document.getElementById('text').style.visibility='visible';
}
else
{
document.getElementById('text').style.visibility='hidden';
}
}
</script>
This should work :)