I am using javascript to check if a checkbox is ticked or not. There are 3 checkboxes and only one can be selected at a time. I am using the following code which works fine, when I uncheck a box and check another the div displays correctly but if I select one then select another e.g have selected checkbox1 and select checkbox2 the "testing" div still appears and the "video" div does not appear. I am guessing this is just something really simple but I can't work it out
HTML
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" onclick="myFunction()" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" onclick="myFunction()" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" onclick="myFunction()" name="html"></div>
</div>
</div>
Javascript
<script>
function checkFunction() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("testing");
var checkBox2 = document.getElementById("myCheck2");
var text2 = document.getElementById("video");
var checkBox3 = document.getElementById("myCheck3");
var text3 = document.getElementById("html");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
text3.style.display = "none";
} else {
text.style.display = "none";
if (checkBox2.checked == true){
text2.style.display = "block";
text.style.display = "none";
text3.style.display = "none";
} else {
text2.style.display = "none";
if (checkBox3.checked == true){
text3.style.display = "block";
text2.style.display = "none";
text.style.display = "none";
} else {
text3.style.display = "none";
text.style.display = "none";
text2.style.display = "none";
}
}
}
}
</script>
</script>
<script type="text/javascript">
$('.check').on('change', function() {
$('.check').not(this).prop('checked', false)
});
</script>
as some people answered you, you should definitely try using some radio buttons instead of checkboxes avoiding completely the need for extra code controlling basic functionality
Check this Out
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input.check').on('change', function() {
if($('input.check').is(':checked'))
{
$('input.check').not(this).prop('checked', false);
$('input.check').not(this).parent('div').css('display', 'none');
}
else{
$('input.check').parent('div').css('display', '')
}
})
})
</script>
<body>
<div class="row">
<div class="col-25">
<label for="lname">Type</label>
</div>
<div class="col-75" style="font-size:17px; padding-top:1%;">
<div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" name="html"></div>
</div>
</div>
</body>
</html>
Found an easy way to fix this, other examples sometimes did not work and you would have to click twice, this works perfect.
<script type="text/javascript">
$('.check').on('change', function() {
var text = document.getElementById("testing");
var text2 = document.getElementById("video");
$('.check').not(this).prop('checked', false)
var res = $(this).val();
console.log("res is: " + res);
if (res == '1') {
text.style.display = "block";
text2.style.display = "none";
}
else {
text.style.display = "none";
text2.style.display = "block";
}
});
</script>
Related
This is my code for checkbox, I want to make this auto checked and display also the results when checked
<!DOCTYPE html>
<html>
<body>
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<script>
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>
You can add a function when the content is loaded,then set checkbox to be checked,finally invoke myFunction method
<!DOCTYPE html>
<html>
<body onload="init()">
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<script>
function init(){
var checkBox = document.getElementById("myCheck");
checkBox.checked = true;
myFunction();
}
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>
$('#myCheck').prop('checked',true);
myFunction();
function myFunction()
{
if($('#myCheck').prop("checked") == true)
{
$('#text').show();
}
else
{
$('#text').hide();
}
}
<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text">Checkbox is CHECKED!</p>
</body>
</html>
I have a confusion in my javascript code since I'm not familiar with js.I have three radio buttons with hidden inputs.Now, if i click radioBtn1, the hidden inputs will show up.What i want is if when i click the radioBtn2 or radioBtn3, the hidden inputs in radioBtn1 should be hidden again.So meaning to say when i click any radioBtn the second time around,the radioBtn that i've click first, its hidden inputs should be hidden again.
function Allowance(select){
if(select.value=='Allowance'){
document.getElementById('allowance').style.display = "block";
}else{
document.getElementById('allowance').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('tuition_fee').style.display = "block";
} else{
document.getElementById('tuition_fee').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('school_supply').style.display = "block";
} else{
document.getElementById('school_supply').style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br>
<div id="allowance" style="display: none;">
<ul>
<li>Food Allowance</li>
<li>Transportation Allowance</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br>
<div id="tuition_fee" style="display: none;">
<ul>
<li>Tuition Fee</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School
<div id="school_supply" style="display: none;">
<ul>
<li>Books</li>
<li>Uniform</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
You can reduce your code by using jquery. Please have a look on the below code, it may help you.
$( document ).ready(function() {
$('.sub_list').css('display','none');
$('input[type=radio]').change(function() {
$('.sub_list').css('display','none');
$('#'+this.value).css('display','block');
console.log(this.value);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="allowance" id="test" > Allowance<br>
<div id="allowance" class="sub_list" >
<ul>
<li>Food Allowance</li>
<li>Transportation Allowance</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="tuition_fee" id="test2" > Tution<br>
<div id="tuition_fee" class="sub_list" >
<ul>
<li>Tuition Fee</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
<input type="radio" name="ship_need" value="school_supply" id="test3" > School
<div id="school_supply" class="sub_list" >
<ul>
<li>Books</li>
<li>Uniform</li>
</ul>
<label class="control-label">Money:</label>
<input type="text">
</div>
before showing an input close the others:
function Allowance(select){
if(select.value=='Allowance'){
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "none";
document.getElementById('allowance').style.display = "block";
}else{
document.getElementById('allowance').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('allowance').style.display = "none";
document.getElementById('school_supply').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
} else{
document.getElementById('tuition_fee').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "block";
} else{
document.getElementById('school_supply').style.display = "none";
}
}
Because your logic is partial, you are showing the fields, but not hiding other fields.
function Allowance(select){
if(select.value=="Allowance"){
document.getElementById('allowance').style.display = "block";
document.getElementById('tuition_fee').style.display = "none";
document.getElementById('school_supply').style.display = "none";
}
}
function Tuition(select){
if(select.value=='Tuition Fee'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
document.getElementById('school_supply').style.display = "none";
}
}
function Supply(select){
if(select.value=='School Supply'){
document.getElementById('allowance').style.display = "none";
document.getElementById('tuition_fee').style.display = "block";
document.getElementById('school_supply').style.display = "block";
}
}
Fiddle here:
https://jsfiddle.net/vjb2dnpg/
each of the 3 code snippets 'on.change();' below work individually, but appears to fail when they are all brought onto the same page. I think this has something to do with the 'this.checked' area - it seems this only reads the last one elem3 any suggestions would be amazing. Seeking JS not jQuery.
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
the HTML is below; what is supposed to occur is only divs in relation to the checkboxs should show when a checkbox is selected. So if the first checkbox is selected on, that checkbox and it's wrapper should show, if all 4 are checked, these 4 should show. 2, 3 etc. The ones that are not selected should hide. Again my JS code works individually, but when I want to do all on that same page, they fail.
HTML
<div class="container" id="records" style="background-color:#fff">
<br/>
<div class="row" id="item1">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 1!</h1>
<p>Item 1 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<input type="checkbox" id="check1" name="sample[]"/> This is a checkbox1</label>
<br />
</div>
</div>
</div>
<div class="row" id="item2">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 2!</h1>
<p>Item 2 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check2" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item3">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 3!</h1>
<p>Item 3 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check3" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item4">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 4!</h1>
<p>Item 4 I'm a hidden div!</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check4" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a></p>
</div>
</div>
</div>
Ok, you question is still unclear, and I will update the answer. But if it is working correctly as in John Bupit's https://jsfiddle.net/wz5sxehn/ - your problem is a simple logical error, not a code error.
Is this JSFiddle working the same as your code?
The problem is you are doing this for every element:
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
For every check-box. One will then hide the other while unhiding itself!
See this running as you want to with minimal changes to the code: https://jsfiddle.net/wz5sxehn/3/
With your HTML: https://jsfiddle.net/wz5sxehn/6/
As others have mentioned, your requirements are not crystal clear. Still, I think this code does what you need.
https://jsfiddle.net/6g0ows2g/
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1'),
elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2'),
elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3'),
elem4 = document.getElementById('item4'),
checkBox4 = document.getElementById('check4');
function updateOptions() {
document.getElementById("item1").style.display = "block";
document.getElementById("item2").style.display = "block";
document.getElementById("item3").style.display = "block";
document.getElementById("item4").style.display = "block";
}
function toggleBlocks(elem, checkBox) {
updateOptions();
checkBox.checked = false;
elem.style.display = "none";
}
checkBox.onchange = function () {
toggleBlocks(elem, checkBox);
};
checkBox2.onchange = function () {
toggleBlocks(elem2, checkBox2);
};
checkBox3.onchange = function () {
toggleBlocks(elem3, checkBox3);
};
checkBox4.onchange = function () {
toggleBlocks(elem4, checkBox4);
};
As a side note, whenever you find yourself repeating a lot of similar code, group that code into a function and use parameters. I find it helps in removing the clutter that hides syntax errors and logic errors.
updateOptions() can be made more elegant, but I'll leave that up to you. Remember, make it work, make it right, make it fast.
I was playing with your code.
As you asked, I've put the 3 code snippets together on the same page and it worked the way it seems to me it was meant to be in your proposal..
The page is always loaded with 'Item-3' visible, because the 'checkBox3.onchange' initiates the elements this way overwriting any previous configuration made by previous 'onchanges'.
(i.e: and at the end of the script 'checkBox3' is configured as unchecked and the item3 as display=block which makes it visible).
if you want to hide item-3 on the page load just uncomment the last line:
//onload (document.getElementById("item3").style.display = "none");
AFAIK, we should avoid mixing javascript and html this way.
Anyway here it goes the code...
I hope it helps (tested on firefox)
<!DOCTYPE HTML>
<html><head><title>Javascript Test</title>
</head>
<body> <h3>Checkbox test</h3>
<form name="CheckBoxes">
<label for="check1">Checkbox 1</label>
<input type="checkbox" name="check1" Id="check1" tabindex="1"><br><br><br>
<label for="check2">Checkbox 2</label>
<input type="checkbox" name="check2" Id="check2" tabindex="2"><br><br><br>
<label for="check3">Checkbox 3</label>
<input type="checkbox" name="check3" Id="check3" tabindex="3"><br><br><br>
</form>
<p id="item1"> Item-1</p><p id="item2"> Item-2</p><p id="item3"> Item-3</p><p id="item4"> Item-4</p>
<script language="javascript">
var elem = document.getElementById('item1'),
// var elem2 = document.getElementById('item2'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
// var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
// var elem2 = document.getElementById('item2'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
//onload (document.getElementById("item3").style.display = "none");
</script>
</body>
</html>
I have been supplied with this code that I can't seem to get working, I've looked around previous questions but can't find anything exactly like it. Maybe it's just totally wrong and should just start again?
What I want to do is show a div when a radio button is selected. Here is my code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[478]"]').change(function(){
var val1 = $("input[name='item_meta[478]']:checked").val();
if (val1== "España") {
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
}
if (val1== "Intracomunitario") {
document.getElementById("div2").style.display = "block";
document.getElementById("div1").style.display = "none";
}
}
</script>
<form>
Show form?
<input type="radio" onclick="frmCheckDependent(this.value,'478')" checked="checked" value="España" id="field_478-0" name="item_meta[478]">España
<input id="field_478-1" type="radio" onclick="frmCheckDependent(this.value,'478')" value="Intracomunitario" name="item_meta[478]">Intracomunitario
</form>
<div id="div1" style="display:none">
Custom form España
</div>
<div id="div2" style="display:none">
Custom form Intracomunitario
</div>
Thanks a lot !
A programmer told me I could do what I want to do with:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[988]"], input[name="item_meta[989]"]').change(function(){
var val1 = $("input[name='item_meta[988]']:checked").val();
var val2 = $("input[name='item_meta[989]']:checked").val();
if (val1 !=undefined && val2 != undefined)
{$("#field_keytotal").val(val1+' '+val2);}
});
});
</script>
And:
<form>
Show form?
<input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value);"/>Yes
<input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value);"/>No
</form>
<script type="text/javascript">
function showhideForm(showform) {
if (showform == "yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
if (showform == "no") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>
<div id="div1" style="display:none">
[formidable id=18]
</div>
<div id="div2" style="display:none">
You are not qualified to see this form.
</div>
jsfiddle.net/cvn6n/72
You're missing a closing bracket. Add one before the </script>
Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>
Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>
You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.
Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>