How can I achieve this dynamically using JavaScript?
onselect radio button 1: Shows div 1,2,5, hides (if not already hidden) divs 3,4,6,7
onselect radio button 2: Shows div 3,4,6,7, hides (if not already hidden) divs 1,2,5
<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
<div id="div-5"></div>
<div id="div-6"></div>
<div id="div-7"></div>
edit I formulated my question poorly, will formulate it better when at home after work..
To make it easier on yourself, add a class to the two groups of radio buttons, something like divGroup1, divGroup2
<div class="divGroup1" id="div-1"></div>
<div class="divGroup1" id="div-2"></div>
<div class="divGroup2" id="div-3"></div>
<div class="divGroup2" id="div-4"></div>
<div class="divGroup1" id="div-5"></div>
<div class="divGroup2" id="div-6"></div>
<div class="divGroup2" id="div-7"></div>
then in jQuery, do something like this:
$("#button-1").click(function()
{
$(".divGroup1").show();
$(".divGroup2").hide();
});
$("#button-2").click(function()
{
$(".divGroup2").show();
$(".divGroup1").hide();
});
the solution is in jQuery
<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2
<div class="c1" id="div-1"></div>
<div class="c2" id="div-2"></div>
<div class="c1" id="div-3"></div>
<div class="c2" id="div-4"></div>
<div class="c1" id="div-5"></div>
<div class="c2" id="div-6"></div>
<div class="c2" id="div-7"></div>
$('#button-1').click(function(){
$('.c1').show();
$('.c2').hide();
})
$('#button-2').click(function(){
$('.c2').show();
$('.c1').hide();
})
Try to use the following parts from jquery
$('#button-1').click(function(){.... your code here .... });
$('#button-2').click(function(){.... your code here .... });
and
$('#div-1').show();
and
$('#div-2').hide();
and when you put it all together it will all work.
JQuery - click methods. Hide the relevant divs in the function, which will hide them whatever their state.
Try this:
$('#button-1').select(function() {
$('#div-1, #div-2, #div-5').show();
$('#div-3, #div-4, #div-6, #div-7').hide();
});
$('#button-2').select(function() {
$('#div-1, #div-2, #div-5').hide();
$('#div-3, #div-4, #div-6, #div-7').show();
});
JSFiddle seems to be slow but I think this should work:
http://jsfiddle.net/nfypC/4/
$('#div-1').hide();
$('#div-2').hide();
$('#div-3').hide();
$('#div-4').hide();
$('#div-5').hide();
$('#div-6').hide();
$('#div-7').hide();
$("#button-1").click(function () {
$('#div-1').show();
$('#div-2').show();
$('#div-5').show();
$('#div-3').hide();
$('#div-4').hide();
$('#div-6').hide();
$('#div-7').hide();
});
$("#button-2").click(function () {
$('#div-1').hide();
$('#div-2').hide();
$('#div-5').hide();
$('#div-3').show();
$('#div-4').show();
$('#div-6').show();
$('#div-7').show();
});
This is relatively basic to do. As others are suggesting, i would suggest using a third party javascript library like jQuery or PrototypeJs.
If you choose jQuery, the following pages should help you out: http://api.jquery.com/show/, http://api.jquery.com/hide/ and http://docs.jquery.com/Main_Page
If you choose PrototypeJS: http://www.prototypejs.org/api/element/show, http://www.prototypejs.org/api/element/hide and http://www.prototypejs.org/learn.
In future, I would recommend you visit these resources first as most of the answers here are making use of libraries like this.
Also, these libraries do ALOT. Really worth getting to know them!
First, what do you mean by dynamically? You'll have to code the relationship somewhere.
What you add a custom attribute to your divs like:
<input type="radio" id="button-1" name="button" />Button 1
<input type="radio" id="button-2" name="button" />Button 2
<div id="div-1" linktoButton="button-1"></div>
<div id="div-2" linktoButton="button-1"></div>
<div id="div-3" linktoButton="button-2"></div>
<div id="div-4" linktoButton="button-2"></div>
<div id="div-5" linktoButton="button-1"></div>
<div id="div-6" linktoButton="button-2"></div>
<div id="div-7" linktoButton="button-2"></div>
Then you could have a single onclick event that would take the id of the button you click, show all divs where linktoButton="button-1' and hide the rest.
You can use the "Has Attribute" selector in jQuery
http://api.jquery.com/has-attribute-selector/
Just remember that this way will have to walk through every element in the dom and may be slow. You may want to have a container div that you can get by ID and just use the attribute selector within the children.
Hope this points you in the right direction, and remember, there's 100 ways to skin this cat.
<input type="radio" onclick="hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven()" id="button-1" name="button" />Button 1
<input type="radio" onclick="showDivOneTwoAndFiveAndHideThreeFourSixAndSeven()" id="button-2" name="button" />Button 2
function hideDivOneTwoAndFiveAndShowThreeFourSixAndSeven(){
$("#div-1,#div-2,#div-5").hide();
$("#div-3,#div-4,#div-5,#div-7").show();
}
function showDivOneTwoAndFiveAndHideThreeFourSixAndSeven(){
$("#div-1,#div-2,#div-5").show();
$("#div-3,#div-4,#div-5,#div-7").hide();
}
Related
I asked how to select more checkbox by value, and it works well.
See here the question: Select more checkbox by value or id
But now I would like to know if you can select these checkboxes if I have 2 divverenti div, here is an example:
<div class="checkbox_option1">
<div class="icheckbox" style="position: relative;">
<input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
<input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
</div>
</div>
<div class="checkbox_option2">
<div class="icheckbox" style="position: relative;">
<input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
<input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
</div>
</div>
I would like that the toggle select only those of the <div class="checkbox_option2"> it's possible? Many Thanks
Check out jQuery child selectors, I think it will be of use: https://api.jquery.com/child-selector/
Building off the solution to your prior question, you would use something along these lines:
var check_germany = $(".checkbox_option2 > input:checkbox[value=Germany]");
Yes use parent-child selectors (using >) if they're direct children like:
$("div.checkbox_option2 > input:checkbox[value=Germany]")...
Or just a space () if they're children or children of children ...etc like:
$("div.checkbox_option2 input:checkbox[value=Germany]")...
In your case the second one will work.
More about CSS selectors here.
I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).
Each of my radio buttons is inside a div, and immediately beside the input (radio) I have some text in a span with the CSS set to display:none. Since I have multiple radio buttons I'm trying set the span to show for ONLY the span beside the radio button that's selected. Thoughts?
Here's what I have currently.
$('input:checked').next().show();
Here's my fiddle for the full quiz I'm trying to build
http://jsfiddle.net/YSSWL/96/
Feel free to critique the rest of my jquery, as I'm likely over complicating something. I don't have a ton of experience with jquery or js (working on it).
Solution Edit: As Chausser pointed out I can use
$('input:checked').parent().find('span').show();
to select the span nearest the parent of the selected input and apply .show();
You can use:
$('input:checked').parent().find('span').show();
I updated your html to use some consistent classes and fixed your reset function as well. For working code check:
http://jsfiddle.net/YSSWL/106/
You can solve this completely with CSS:
.incorrect .incor { display: inline; }
http://jsfiddle.net/YSSWL/105/
Here is a better way to write this I think. A bit more flexible. Sorry I deleted a bunch of your stuff to make it clear what was going on.
JS:
$(document).ready(function () {
$(document).on('click', '#radiochk1', function(){
var checkedRadio = $('input[name="question1"]:checked');
$('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
if(checkedRadio.hasClass('rightAnswer')){
checkedRadio.parent().find('span.answer').addClass('correct');
}else{
checkedRadio.parent().find('span.answer').addClass('incorrect');
}
});
$(document).on('click', '#resetq1', function(){
$('.correct, .incorrect').removeClass('correct').removeClass('incorrect');
$('input[name="question1"]').attr('checked', false);
});
});
HTML:
<form class="ra">
<div class="cor">
<input type="radio" name="question1" class="c1" />A. Choice A<span class="hiddencorr">Correct answer</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i1" />B. <span class="answer">Choice B</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i2 rightAnswer" />C. <span class="answer">Choice C</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i3" />D. <span class="answer">Choice D</span>
</div>
<div class="inc">
<input type="radio" name="question1" class="i4" />E. <span class="answer">Choice E</span>
</div>
</form>
<p class="rationale1"><b>Rationale:</b>
<br />
<br /><span class="rattext">Explanation of what was done wrong.</span>
</p>
<button id="radiochk1" class="checkhide">Check your answer</button>
<button id="resetq1" class="reset">Reset</button>
I'm attempting to get the Website URL field on this page to display only when the previous question has the radio button "Yes" selected. I've searched and tried a few code examples, but they aren't working. Does anyone have any suggestions for me?
Thanks in advance!
<div class="editfield">
<div class="radio">
<span class="label">Do you have your own website? (required)</span>
<div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No"> No</label></div>
</div>
</div>
<div class="editfield">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>
I noticed that you initally put the javascript I gave you at the top of the page. If you are going to do this then you need to encapsulate the code in a jquery $(document).ready(function(){ });. You only need to use a document ready when your html follows after the javascript.
$(function() {
// place code here
});
However, in this scenario I have created another alternative that will be better, but do not forget that you have to initially set the web url div as hidden. Also, I highly recommend that you set better control ids; it will make your javascript easier to understand.
$('input[name=field_8]').on("click", function(){
var $div_WebUrl = $('#field_19').closest('.editfield');
if($('input[name=field_8]').index(this) == 0)
$div_WebUrl.show();
else
$div_WebUrl.hide();
});
Live DEMO
I have created a little example:
<div class="editfield">
<div class="radio">
<span class="label">Do you have your own website? (required)</span>
<div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes" onclick="document.getElementById('divUrl').style.display='block'"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No" onclick="document.getElementById('divUrl').style.display='none'"> No</label></div>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>
jsFiddle: http://jsfiddle.net/EQkzE/
Note: I have updated the div to include a style, cause I do not know what your css class looks like. Good luck.
Here's a pure JS Solution:
document.getElementById("field_19").parentNode.style.display = "none";
document.getElementById("option_9").onclick = toggleURLInput;
document.getElementById("option_10").onclick = toggleURLInput;
function toggleURLInput(){
document.getElementById("field_19").parentNode.style.display = (document.getElementById("option_9").checked)? "block" : "none";
}
Not a very dynamic solution, but it works.
Something like this will bind the click event to a simple function to look at the radio button and show the other div.
$('#option_9').on('click', function() {
if ($('#option_9').is(':checked')) {
$('#field_19').closest('.editfield').show();
} else {
$('#field_19').closest('.editfield').hide();
}
});
Run sample code
When I click .getdata, I want to go from .getdata to name=top and read the value of whichever option is selected (in this case it's 0), but I'm having a hard time getting to it. I keep getting undefined.
This is my html. The div class="main" repeats so I can't simply select input[name=top]. It would have to be through traversing the tree to the closest input[name=top]. Can someone get this right? I'm starting to think it's a browser error because I tried different options and all give me undefined.
<div class="main">
<div class="branch">
<div class="element">
<label>top color:</label>
<input type="radio" value="1" name="top">black
<input type="radio" value="0" name="top" checked="checked">white
<input type="radio" value="null" name="top">transparent
</div>
</div>
<div class="controls">
<a class="getdata">get data</a>
</div>
</div>
<div class="main">
....
</div>
$('a.getdata').click(function() {
var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});
Place a click()(docs) event on the <a> element
On a click, use the closest()(docs) method to traverse up to the .main element
Then use the find()(docs) method along with the the attribute-equals-selector(docs) and the checked-selector(docs) to get the checked name="top" radio.
Finally use the val()(docs) method to get its value.
$(".getdata").click(function(){
selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
console.log(selectedValue);
});