If certain radio buttons checked, display div else display different div? - javascript

:) So I'm trying to create a user questionaire type form, it doesnt have to send to anyone just display a div once certain radio buttons are checked and if them certain radio buttons arent checked then display a different div, but also when the webpage opens/refreshes none of the div's I want to display to be displayed (if that makes sense?). I found some code on here to try but it didnt work for me, I'm a noob with JS & Jquery but was hoping anyone could shed some light on my problem. please find my code below.
Jquery?
if($('input[value=yes1]:checked,
input[value=yes2]:checked,
input[value=yes3]:checked,
input[value=yes4]:checked').length == 4){
$("#correct").show();
}else{
$("#correct").hide();
HTML
<div class="row">
<div class="left">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes1" value="yes1" name="iCheck1">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no1" name="iCheck1">
<label>No</label>
</input>
</div>
</div>
</div>
<div class="right">
<div class="right answer">
<div class="leftradio">
<input type="radio" id="yes2" value="yes2" name="iCheck2">
<label>Yes</label>
</input>
</div>
<div class="rightradio">
<input type="radio" id="no2" name="iCheck2">
<label>No</label>
</input>
</div>
</div>
</div>
Yes
No
Yes
No
CSS
#correct{width:100%; height:50px; background:green; display:none;}
#incorrect{width:100%; height:50px; background:red; display:none;}

I think this is what you're looking for. I had to change the number of "correct" answers to two because that's all the html you have.
JS:
$( "input" ).on( "click", function() {
if($('input[value=yes1]:checked, input[value=yes2]:checked').length === 2){
$("#correct").show();
}else{
$("#correct").hide();
}
});
Working JS Fiddle: http://jsfiddle.net/akj84vrq/12/

A little something like this would probably get you what you want.
http://jsfiddle.net/uu512erm/
Listen for change event on the radio inputs by $('input:radio').change(function(){}
and then just add the logic inside.

I'm not sure that this can be accomplished via CSS.
Now, you are checking against some values/elements that don't exist in your code (ie input[value=yes3]:checked, you don't have input with that value, check it for yourself).
I don't understand what exactly you want to accomplish, but I will still try to help and since you're new let's keep it very basic:
if ($('input[value=yes1]').is(':checked') && $('input[value=yes2]').is(':checked')) {
// this will fire only if input with values yes1 and yes2 is checked
$('div_to_show').show(); // put your own selectors here
$('div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=no1]').is(':checked') && $('input[value=no2]').is(':checked')) {
// this will fire only if input with values no1 and no2 is checked
$('some_other_div_to_show').show(); // put your own selectors here
$('some_other_div_to_hide').hide(); // put your own selectors here
}
if ($('input[value=yes1]').is(':checked') && $('input[value=no1]').is(':checked')) {
# this will fire only if both input with values yes1 and no1 is checked
$('some_other_div_to_show').show(); # put your own selectors here
$('some_other_div_to_hide').hide(); # put your own selectors here
}
# and so on... just type in your conditions and that's it.
If you need some other cases, just add them using this pattern or construct one complex else if statement with all your scenarios.

Related

checkbox is not working properly in html how to fix?

I have this checkbox input that I want it to call a function when its clicked
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
I tried different methods the only way that I got it to work was by using the onclick on the span but that would not work if the box gets checked!
Can anyone help me with this?
I can't change the layout because I have a fixed HTML that is like this for a lot of checkboxes.
This appears to be working the way you describe it with a simple "system()" function. The problem may be in your system() function.
function system(){
console.log("inside system")
}
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
Try this. First select the check box in JavaScript:
const $checkbox = document.querySelector('.icheck');
Then add a click event listener to it:
$checkbox.addEventListener('click', system);
This will run system when it is clicked.

How to expand/collapse list of information in a webpage using a link

I am new to web programming and wants to create a link that will expand and collapse a list of information. I was able to do this using radio buttons as shown in the following example bellow.
Instead of using a radio button or a regular button, can you please tell me how can I achieve this same feature using a clickable link. Ex: + More
Please show me with an example if possible.
<script type="text/javascript">
function OnChangeCheckbox1 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'none';
document.getElementById(checkbox.id).style.display = 'none';
}
}
function OnChangeCheckbox2 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'block';
document.getElementById(checkbox.value).style.display = 'block';
}
}
</script>
* Some Information about X<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label>
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span>
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br>
* Some Information about Y<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label>
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span>
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br><br>
Aditional Information goes here
Working Code: https://jsfiddle.net/hey4769/owpat8zf/
While it's an idea to use value/name/id attributes, please be aware this does not work for all elements. Also name attribute (at least for some elements) is deprecated in html5.
So I've chosen to use data attributes. And, as I'm spoiled with using jQuery, I decided to test some things in javascript, and included 2 different functions, one using this and another passing the event.
For selecting the elements to show/hide I've used document.querySelector, which works like a css selector.
I'm also changing the text on the a element after clicking it. Last I've added some console logs. Hope it's useful!
https://jsfiddle.net/hamu21gj/
you can you href to add your javascript like this:
href="javascript:MyFunction"
I changed your code a little bit just to make an example.
https://jsfiddle.net/owpat8zf/3/

How to toggle text with a button?

I want to replace the text not rated with 100% if you press the up arrow button or 0% if you press the down arrow button. I would like to accomplish this with either js or jQuery I just don't know how to go about it.
<div class="votesystem">
<input type="checkbox" class="votes" role="button">
<label for="voteup" onclick=""><span class="voteswitch"> <img src="images/voteup.png" data-value="up"/><br /><br /></span>
<p>Not rated</p>
<span class="voteswitch"><img src="images/votedown.png" data-value="down" /></span> </label>
</div>
UPDATE
Ok, I'm going to elaborate on the question to clear up confusion. I found some code that contains a similar effect of what I want, except it hides the text: Testing when I would like to replace the text testing with another word when clicking the checkbox.
Also I would like to make it a radio button instead of checklist so the text changes depending on the button selected. Thanks for your help so far.
<label>Chanage text</label>
<input type="checkbox" id="test">
<div id="content" class="hide">
<p>testing</p>
</div>
And the jquery
$(document).ready(function(){
$('.hide').hide();
$('#test').click(function(){
$('#content').toggle();
});
});
Try this,
Give your HTML an id or class (some kind of selector) then use jQuery/JavaScript to change your elements HTML based on your keyboard press.
You could also get it by it's <p> tag as Bardyl mentioned but that is a bad idea if you may have multiple <p> tags at some point.
<p id="foo">Not rated</p>
<script>
$("#foo").keypress(function(event) {
if (event.which == 38) {
$("#foo").html("100%");
} else if (event.which == 40) {
$("#foo").html("0%");
}
});
</script>

creating quiz jquery, function load options store quiz

code: http://jsfiddle.net/HB8h9/7/
<div id="tab-2" class="tab-content">
<label for="tfq" title="Enter a true or false question">
Enter a Multiple Choice Question
</label> <br />
<textarea name="tfq" rows="3" cols="50"></textarea>
<p>Mark the correct answer</p>
<input type="radio" name="multians" value="A">A)</input>
<input name="Avalue" type="text">
<br>
<input type="radio" name="multians" value="B">B)</input>
<input name="Bvalue" type="text">
<br>
<input type="radio" name="multians" value="C">C)</input>
<input name="Cvalue" type="text">
<br>
<input type="radio" name="multians" value="D">D)</input>
<input name="Dvalue" type="text">
<br>
//different file below used as main page
$(document).ready(function() {
$("#second li ").click(function() {
$("#content").load("file_above.html .tabs");
});
});
trying to create a quiz using div elements from different file containing select option tags. Need to create a function which will load all the "appropriate div tags" according to the selected option and display the dropdown options again after each option has been selected. I'm not sure when to implement submit button either after each question type is loaded or somewhere between 5 - 10 questions. the submit button will "store" the questions selected into a quiz which will later be used for another user to answer.
I hope this makes sense, I'm not too familiar with jquery and any help would be highly appreciated.
Any other techniques which would be better suited are also welcomed.
thanks.
You must set an id to select element and hadle onChange event over this.
Somehting like:
$(document).ready(function(){
$('#selectionId').onChange(function(){
/*load new options into select element*/
$(this).append('option data-tab="tab-6">New option text</option>');
/*displaying desired div. Using HTML5 data attributes as in the fiddle*/
var selected=$(this).attr('data-tab');
if (selected==='tab-1'){
/*load or display tab-1 class div*/
}else...
});
});
You can have various html files with only the corresponding tab to load or in the same file you are defined the select element you can have the tab class divs with visibility attribute set to 'none' and show the targeted div after user selects an option.
Personally, I preferred the last one option.
I hope this fixes your problem
http://jsfiddle.net/r9sv8/
Use the .change() to listen to the options selected and display the div respect to it.
$('.tabs').change(function(){
$('.tabQues').hide('500'); // Hides all the divs
var changeVal = $(this).val(); //Takes the value of the <option>
if(changeVal=="selectOne"){
$('.'+changeVal).show('500'); //show the div you want
}else if(changeVal=="multiple"){
$('.'+changeVal).show('500');
}else if(changeVal=="trueFalse"){
$('.'+changeVal).show('500');
}else if(changeVal=="short"){
$('.'+changeVal).show('500');
}else if(changeVal=="program"){
$('.'+changeVal).show('500');
}else{
$('.tabQues').hide();
}

check html checkbox using a button

I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>

Categories

Resources