Only one will be selected. It properly works when I first select female.
Actually I want to implement that if I select male than female will automatically uncheck again if I check female male will automatically uncheck
function myFunction() {
var checkBox = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text");
var text2 = document.getElementById("text2");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked=false;
} else if(checkBox2.checked == true) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked=false;
}
else{
text.style.display = "none";
text2.style.display = "none";
}
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction()">
<input type="checkbox" id="myCheck2" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
You need to know which checkbox call the function and you could handover the element for checking the actual element.
function myFunction(element) {
var checkBox = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text");
var text2 = document.getElementById("text2");
if (element === checkBox && checkBox.checked) {
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked = false;
return;
}
if (element === checkBox2 && checkBox2.checked) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked = false;
return;
}
text.style.display = "none";
text2.style.display = "none";
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
A slightly different approach
function myFunction(element) {
var boxes = [
[document.getElementById("myCheck1"), document.getElementById("text")],
[document.getElementById("myCheck2"), document.getElementById("text2")]
];
if (element.checked) {
boxes.forEach(([c, t]) => {
if (element === c) {
t.style.display = "block";
} else {
t.style.display = "none";
c.checked = false;
}
});
return;
}
boxes.forEach(([, t]) => t.style.display = "none");
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
Not sure why you would use checkbox if only 1 option would be selected, can I suggest using radio inputs instead?
HTML
<form name="example-form" id="example-form">
<div id="radio-buttons">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div id="wrapper">
<p id="text--male" class="text hidden">Selected male</p>
<p id="text--female" class="text hidden">Selected female</p>
</div>
</form>
Javascript
const form = document.getElementById('example-form');
const inputs = form.getElementsByTagName('input');
const texts = document.getElementsByClassName('text');
for(let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', function(evt) {
toggleText(evt.target.value);
})
}
function toggleText(tar) {
for(let t = 0; t < texts.length; t++) {
document.getElementsByClassName('text')[t].classList.add('hidden');
}
document.getElementById(`text--${tar}`).classList.remove('hidden')
}
Just wanted to show another, simple way of doing this. Since you have myCheck1 associated with text and myCheck2 associated with text2, I decided to rename text's id to text1. This way, instead of doing numerous if/elseif/else call's, I can control the associated element more easily with element.id.replace('myCheck', 'text'), etc..
Take a look, much simpler:
function myFunction(element) {
document.getElementById("text1").style.display = "none";
document.getElementById("text2").style.display = "none";
if(element.checked != true) {
return true;
}
document.getElementById("myCheck1").checked = false;
document.getElementById("myCheck2").checked = false;
document.getElementById(element.id).checked = true;
document.getElementById(element.id.replace("myCheck", "text")).style.display = "block";
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text1" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
This will make it very easy to add a third option: for other, for instance, which would make the above example more inclusive.
Related
I have three checkboxes, which are linked to three images (image dimensions, not that it matters: 800x500, 500x300, 290x170). I want those images like:
1)When three of them are clicked, two images should be beside each other, 290x170 should be under those two.
2)If first button is switched off, 290x170 should be on top and 500x300 on bottom.
3)If second button is switched off, on top should be 800x500 image and under that 290x170.
4)If third button is switched off, 800x500 and 500x300 images should be beside each other.
5)default should be 290x170 image.
function checkValue() {
let CheckBox1 = document.getElementById("CheckBox1");
let CheckBox2 = document.getElementById("CheckBox2");
let CheckBox3 = document.getElementById("CheckBox3");
if (CheckBox1 && CheckBox2 && CheckBox3.checked == true) {
document.getElementById("image1").style.display = "inline";
document.getElementById("image2").style.display = "inline";
document.getElementById("image3").style.display = "inline";
} else if (CheckBox2 && CheckBox3.checked == true) {
document.getElementById("image1").style.display = "none";
document.getElementById("image2").style.display = "inline";
document.getElementById("image3").style.display = "inline";
} else if (CheckBox1 && CheckBox2.checked == true) {
document.getElementById("image1").style.display = "inline";
document.getElementById("image2").style.display = "inline";
document.getElementById("image3").style.display = "none";
} else CheckBox1 && CheckBox3.checked == true;
document.getElementById("image1").style.display = "inline";
document.getElementById("image2").style.display = "none";
document.getElementById("image3").style.display = "inline";
}
<div class="menu">
<p>Choose dimensions for an image</p>
<button class="btn">800x500
<label class="switch">
<input type="checkbox" id="CheckBox1" onclick='checkValue()'>
<span class="slider"></span>
</label>
</button>
<button class="btn">500x300
<label class="switch">
<input type="checkbox" id="CheckBox2" onclick='checkValue()'>
<span class="slider"></span>
</label>
</button>
<button class="btn">290x170
<label class="switch">
<input type="checkbox" id="CheckBox3" onclick='checkValue()'>
<span class="slider"></span>
</label>
</button>
</div>
<div id="main-content">
<div class="image-boxes">
<img src="https://via.placeholder.com/800x500.jpg" id="image1" class="image" style="display:none" />
<img src="https://via.placeholder.com/500x300.jpg" id="image2" class="image" style="display:none" />
<img src="https://via.placeholder.com/290x170" id="image3" class="image" />
</div>
</div>
Inside every if check of yours, the conditional is not written correctly.
CheckBox1 && CheckBox2 && CheckBox3.checked == true
Is the same as just checking CheckBox3.checked. Because you are not checking the value of .checked property for the first 2 checkboxes, JS will check their truthy-ness. And because CheckBox1 and CheckBox2 exist (not null), they become true.
Also, if statements takes in a boolean value (true or false). Since the .checked value is already a boolean, there is no need to compare it to true.
Instead, the conditional should look like this. Same problem for the else ifs.
if (CheckBox1.checked && CheckBox2.checked && CheckBox3.checked) {
...
Lastly, else should not take any condition, so it should be:
else{
document.getElementById("image1").style.display = "inline";
document.getElementById("image2").style.display = "none";
document.getElementById("image3").style.display = "inline";
}
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>
Okay first of all i have code like this
<input type="checkbox" class="css-checkbox" id="test1">
<input type="checkbox" class="css-checkbox" id="test2">
<input type="checkbox" class="css-checkbox" id="test3">
<input type="checkbox" class="css-checkbox" id="test4">
Now i modified it like this
<input type="checkbox" class="css-checkbox" id="test1" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test2" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test3" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test4" onclick="myFunction()">
And this is myfunction
function myFunction() {
var testArr = ["test1", "test2"];
for (var i = 0; i < testArr.length; i++) {
var checkBox = document.getElementById(testArr[i].value);
if (checkBox.checked == true){
Materialize.toast('I am a toast!', 4000)
}
}
}
What i am trying to do ?
I am trying to show a notice/Dialog that materialize.toast will show when checkbox with id test1 or test2 are checked. and doesn't do anything when test3 or test4 is selected. i hope anyone can help me with this.
I believe the below is what you are looking for.
First, add this as a parameter in the function used in the checkbox, that way you can trigger the clicked checkbox
And then in the function check if the clicked checkbox is checked, and have the special id, then do whatever you want
function myFunction(e) {
var testArr = ["test1", "test2"];
var chkId = $(e).attr("id");
if (e.checked == true && testArr.indexOf(chkId) !== -1) {
console.log("Materialize goes here!"); //Materialize.toast('I am a toast!', 4000)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="css-checkbox" id="test1" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test2" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test3" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test4" onclick="myFunction(this)">
You can try with the below code it will helps you.
function myFunction(id) {
var c = document.getElementById(id);
if((id=='test1' || id=='test2') && c.checked)
{
Materialize.toast('I am a toast!', 4000)
}
}
Issue with this line
var checkBox = document.getElementById(testArr[i].value);
It has to be
var checkBox = document.getElementById(testArr[i]).value;
Also to know if checkbox is checked, there is no need to get it's value
document.getElementById(testArr[i]).checked
will return state of checkbox
function myFunction() {
debugger;
var testArr = ["test1", "test2"];
for (var i = 0; i < testArr.length; i++) {
var checkBox = document.getElementById(testArr[i]);
if (checkBox.checked == true){
alert('I am a toast!');
}
}
}
removing value from document.getElementById(testArr[i]).value works for me
or you can directly check checkbox is checked or not using following function
function myFunction() {
debugger;
var testArr = ["test1", "test2"];
for (var i = 0; i < testArr.length; i++) {
var flag = document.getElementById(testArr[i]).checked;
if (flag){
alert('I am a toast!');
}
}
}
var checkBox = document.getElementById(testArr[i]);
This should solve your problem.
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/
Can someone help me make this alert look much nicer? Like Maybe split up Each text box on its own line? I can not figure out how to make this look a lot cleaner and not just all piled on one line.
To see alert hit Lien radio button and then hit next without filling textboxes
http://jsfiddle.net/t4Lgm0n2/9/
function validateForm(){
var QnoText = ['lien']; // add IDs here for questions with optional text input
var ids = '';
flag = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids = QnoText[i]+'lname';
var eD = "";
if (CkStatus && document.getElementById(ids).value == '') {
eD = eD+' lienholder name';
document.getElementById(ids).focus();
flag = false;
}
ids2 = QnoText[i]+'laddress';
if (CkStatus && document.getElementById(ids2).value == '') {
eD=eD+' lienholder address';
document.getElementById(ids2).focus();
flag = false;
}
ids3 = 'datepicker2';
if (CkStatus && document.getElementById(ids3).value == '') {
eD=eD+' lien date';
document.getElementById(ids3).focus();
flag = false;
}
if(eD!="") alert("Please enter "+eD);
}
return flag;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" value="Yes" name="lien" id="lien" required="yes" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
$("#div1 > .clearfix input:text").val("");
}
}
</script>
<div id="div1" style="display:none">
<div class="clearfix">
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" validateat="onSubmit" validate="maxlength" id="lienlname" size="54" maxlength="120" message="Please enter lienholder name." value="">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" validateat="onSubmit" validate="maxlength" id="lienladdress" size="54" maxlength="120" message="Please enter lienholder address." value="">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2" mask="99/99/9999" value="">
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<input type="submit" name="submit" value="Next" onclick="validateForm()">
You can use new line characters \n to make text more readable:
var eD = [];
if (CkStatus && document.getElementById(ids).value == '') {
eD.push('Please enter lienholder name');
document.getElementById(ids).focus();
flag = false;
}
// ...
if (eD.length) alert(eD.join('\n'));
As you can see I'm also pushing error messages into ed array, which makes it more convenient to concatenate resulting message using .join() method.
Demo: http://jsfiddle.net/t4Lgm0n2/11/