Develop Reference

Hide/Show div based on checkbox selection

I'm building a form that's supposed to hide and show content according to checkbox selections made by the user. No luck so far in identifying where the error in my code is. Any help will be appreciated. Thanks!
function documentFilter(trigger, target) {
$(trigger).change(function () {
if ($(trigger).checked)
$(target).show();
else
$(target).hide();
});
}
documentFilter("triggerDiv", "hideableDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" id="triggerDiv" > Some caption </label>
<div id="hideableDiv" class="well">
Some hidable content </div>

You were not sending the correct jQuery string to your function.
Change:
documentFilter("triggerDiv", "hideableDiv");
to:
documentFilter("#triggerDiv", "#hideableDiv"); // notice the '#'s to grab ids
It would be more concise to just toggle the hideableDiv whenever the checkbox state changes.
If the checkbox state is always unchecked on load, just hide the div on page load.
If the checkbox state is determined dynamically, then you'd need to check the prop checked state on page load to hide or show the div initially.
function documentFilter(trigger, target) {
$(trigger).on('change', function () {
$(target).toggle();
});
}
documentFilter("#triggerDiv", "#hideableDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" id="triggerDiv" > Some caption </label>
<div id="hideableDiv" class="well" style="display:none">
Some hidable content </div>

Your selectors aren't the best. I'd do the following:
Hide the div when the page loads using jQuery's .hide()
Listen for the checkbox to be clicked
When the checkbox is clicked, check to see if the current state of the checkbox is checked using this.checked
Based on the current state, either hide() or show()
DEMO: http://jsbin.com/zukobufefe/edit?html,js,output
$("#hideableDiv").hide();
$("input[type=checkbox]").click(function() {
if (this.checked)
{
$("#hideableDiv").show();
}
else
{
$("#hideableDiv").hide();
}
});

Your selectors are bad. If you want to find by id you shoud use # before id
To get checked state use .prop
You can use .toggle(state) to show/hide element according to passed state
Try this:
function documentFilter(trigger, target) {
var $target = $(target);
$(trigger).change(function() {
$target.toggle(this.checked);
});
}
documentFilter("#triggerDiv", "#hideableDiv");

JavaScript: change href value when box is checked

I have a button that links to a product page, like so...
<button>Buy This</button>
And I need to change the value of href when a box is checked. This is what I have so far
document.getElementById(#option1).checked = true;
document.getElementById(#link).value = '/product/option1.html';
But it's not working.
Thanks! :)

Of course it's not working...
getElementById, not GetElementById - case matters!
'option1', not #option1 - I don't know where you got the idea that #option1 was right.
You are setting the checked property to true, meaning the checkbox will be set to checked.
You have no event handler at all, so this code will only run once, when the page loads, and won't update when the user toggles the box.
A link's href is in its .href property, not its .value (it doesn't actually have a .value)
You have a <button> inside an <a> tag. Not technically valid, although most browsers will work the way you'd expect. This isn't a guarantee though, and you should either use a link, or a JS event handler on the button.
With all that in mind, I present to you...
<button id="link">Buy this</button>
<label><input type="checkbox" id="option1" /> Option text</label>
document.getElementById('link').onclick = function() {
if( document.getElementById('option1').checked) {
location.href = '/product/option1.html';
}
else {
location.href = '/product.html';
}
};

You added jquery as a tag, if you're using it, try this:
$(function(){
$("body").on("change", "#option1", function(){
$("#link").attr("href", "https://www.google.com");
});
})

Here is a nice demo I made in JSFiddle...
www.jsfiddle.net/Lvu5818f
document.getElementById("link").onclick = function() {
var link = document.getElementById("link");
var checkbox = document.getElementById("button");
if(checkbox.checked){
link.setAttribute("href", "#test2");
}
return true;
}
<button>Buy This</button>
<br>
<label><input type="checkbox" name="checkbox" value="true" id="button">Add an extra T-Shirt</label>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test1">This is some text a long way away...</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test2">This is some text even farther away...</div>

document.GetElementById('#link').href= '/product/option1.html';

Attach a checkbox javascript to a class

I have done 7 check boxes and code them to only one should be checked, and here is the code:
$j(document).ready(function(){
$j(':checkbox').bind('change', function() {
var thisClass = $j(this).attr('class');
if ($j(this).attr('checked')) {
$j(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
}
else {
$j(this).attr('checked', false);
$j('.first-image').show();
$j('.hide-onload').hide();
}
});
});
and I had to create another 2 check boxes in the same page to choose between "yes" or "no" and they have another class
everything is fine except when I check the "Yes" "No" boxes it should not uncheck the first checked box because it is in different class.
The question is: How to make the code I have attach to work only with the class of the first 7 check boxes and make another one for the "Yes" "No" check boxes.
I hope I was clear enough, and here is the page link I am working on it that explains the problem http://www.cabas-durables.fr/magento/index.php/custom-contact/
Thank you in advance ....

You can separate your responsabilities with two additional classes:
$j('.normal-checkboxes:checkbox').bind(...);
$j('.yes-no:checkbox').bind(...);
And then wrap your checkboxes like this:
<div class="normal-checkboxes">
<input type="checkbox">
<input type="checkbox">
</div>
<div class="yes-no">
<input type="checkbox">
<input type="checkbox">
</div>
EDIT:
$j(document).ready(function(){
// When clicking a .normal-checkboxes..
$j('.normal-checkboxes:checkbox').bind('click', function() {
// Remove the property checked for all normal-checkboxes
$('.normal-checkboxes:checkbox').prop('checked', false);
// Add the property checked to the clicked one
$(this).prop('checked', true);
});
});

Disabling a textbox when the other textbox have a value HTML

im sorry for this question but how can i disable a textbox if another textbox have a value??
I already try this code but its not working,, sorry for the noob question T_T
function disable(downpayment,full_payment)
{
if ( downpayment.value.length >= 1 )
document.getElementById(full_payment).disabled = true;
else
document.getElementById(full_payment).disabled = false;
}
</script>
<input name="downpayment" id="downpayment" type="text" onselect="function disable(downpayment,full_payment);" style="width:250px" />
</p>
<p>
<input name="full_payment" id="full_payment" type="text" style="width:250px" />

If you want to stay with plain JavaScript:
// finding the relevant elements *outside* the function
var downpayment = document.getElementById('downpayment'),
full_payment = document.getElementById('full_payment');
function enableToggle(current, other) {
/* 'current' is the element that currently has focus
'other' is the other input element, that does not have focus.
1. if the 'current' value of the focused/active element, once the whitespace
is removed, is greater than 0 (so it has something in it other than whitespace,
the disabled property of the 'other' element is true,
2. if the 'current' element has only whitespace, and/or a zero-length value,
the 'other' element's disabled property is false.
*/
other.disabled = current.value.replace(/\s+/,'').length > 0;
}
// using the onkeyup event to call a function on the elements.
downpayment.onkeyup = function () {
enableToggle(this, full_payment);
}
full_payment.onkeyup = function () {
enableToggle(this, downpayment);
}
This works with the following HTML:
<input name="downpayment" id="downpayment" type="text" style="width:250px" />
<input name="full_payment" id="full_payment" type="text" style="width:250px" />
JS Fiddle demo.
If you're using jQuery already, then you can either nest the above into jQuery's $(document).ready(function(){ /* the code in here */});, or switch to a jQuery-only solution, such as Alex's.
To stick with plain-JavaScript, and avoiding explaining how to set up an equivalent DOM-ready event, put the following at the end of your HTML content, just before the closing </body> tag:
<script>
var downpayment = document.getElementById('downpayment'),
full_payment = document.getElementById('full_payment');
function enableToggle(current, other) {
other.disabled = current.value.replace(/\s+/,'').length > 0;
}
downpayment.onkeyup = function () {
enableToggle(this, full_payment);
}
full_payment.onkeyup = function () {
enableToggle(this, downpayment);
}
</script>
(This is exactly the same JavaScript as above, with the comments stripped out, but wrapped in <script></script> tags)
Putting this at the bottom of the HTML means that the elements exist in the DOM prior to your trying to assign event-handlers to them.
Incidentally, with adjusted HTML, to give:
<form>
<!--
I associated the relevant elements with a class-name 'enableToggle',
you don't have to, it just reduces the work the jQuery has to do later
when using siblings('.enableToggle') to find the relevant elements.
-->
<div>
<label for="downpayment">Downpayment</label>
<input name="downpayment" class="enableToggle" id="downpayment" type="text" style="width:250px" />
<label for="full_payment">Full payment</label>
<input name="full_payment" class="enableToggle" id="full_payment" type="text" style="width:250px" />
</div>
</form>
The following jQuery could be used:
// binds both event-handler to both 'keyup' and 'paste' events.
$('.enableToggle').on('keyup paste', function(){
/* 'curVal' is a Boolean (true or false) depending on whether there's
a value other than whitespace */
var curVal = $(this).val().replace(/\s+/g,'').length > 0;
/* sets the 'disabled' property of the sibling elements of the current
element, as long as those siblings have the class 'enableToggle'
(this avoids having to explicitly identify all the elements you want
to act on). */
$(this).siblings('.enableToggle').prop('disabled', curVal);
});
JS Fiddle demo.

You have tagged the question jQuery, so it's as simple as...
$("#downpayment").on("change paste", function() {
$("#full_payment").prop("disabled", this.value.length);
});
As soon as your down payment has some content in it (even if it's a space, if that's not ideal, $.trim() the input before you check its length property) then it will enable the full payment.

$(document).ready(function()
{
$(".PaxHeads").on('keypress','input[name="DebitAmount"]',function()
{
var myLength = $('input[name="DebitAmount"]').val().length;
if (myLength!=0)
{
$('input[name="CreditAmount"]').attr("disabled", "disabled");
}
else
{
$('input[name="CreditAmount"]').removeAttr("disabled");
}
});
$(".PaxHeads").on('keypress', 'input[name="CreditAmount"]', function()
{
var myLength1 = $('input[name="CreditAmount"]').val().length;
if (meLength1!=0)
{
$('input[name="DebitAmount"]').attr("disabled", "disabled");
}
else
{
$('input[name="DebitAmount"]').removeAttr("disabled");
}
});
});

Javascript/jQuery issue

I'm trying to make radio buttons that when you have them active, it displays a dropdown. I can already make it display, but when I click on another radio button, it shows one, but doesn't hide the other...
Code:
<input type='radio' name='op' onchange='$("#ban_length").fadeToggle();'/>
<input type='radio' name='op' onchange='$("#rank_list").fadeToggle();'/>

JavaScript section:
$(document).ready(function() {
$('#op1').change(function(){
$("#ban_length").fadeIn();
$("#rank_list").fadeOut();
});
$('#op2').change(function(){
$("#ban_length").fadeOut();
$("#rank_list").fadeIn();
});
});
HTML:
<input type='radio' name='op' id='op1'/>
<input type='radio' name='op' id='op2'/>
<div id="ban_length">demo</div>
<div id="rank_list">demo</div>
Demo:
http://jsfiddle.net/b2UPt/1/

<input type='radio' name='op' onchange='$("#ban_length").fadeIn();$("#rank_list").fadeOut();'/>
<input type='radio' name='op' onchange='$("#rank_list").fadeIn();$("#ban_length").fadeOut();'/>
Though I would suggest removing the javascript from the elements themselves, giving them ids and adding the javascript to a separate script with $(theID).change(function(){....
Alternatively, you can use hide instead of fadeOut if you would like them to hide immediately.
And one last suggestion. If there are many of these and not just 2, I would add a shared class to each of the elements you are fading in. Then instead of hide on each element, just call $(".className").hide() to hide any that might be visible.

The change event only fires on the element that was clicked (i.e. the radio button that is now enabled). It isn't fired when a radio button is automatically disabled.
So you need to check all the radio buttons every time one of them triggers the change event. You need to be able to tell them apart, though, so start by giving them ids:
<input type="radio" name="op" id="radio_ban_length" />
<input type="radio" name="op" id="radio_rank_list" />
After that, you can use them to toggle the correct dropdowns:
$('input:radio').change(function() {
var id = $(this).attr("id");
if (id === "radio_ban_length") {
$("ban_length").fadeIn();
$("rank_list").fadeOut();
} else {
$("rank_list").fadeIn();
$("ban_length").fadeOut();
}
});
Alternatively, if you like a challenge or if you might have more than two radio's, you could use filter() and :checked to do something like this:
function getDropdownId(radioId) {
return '#' + radioId.replace(/^radio_/, '');
}
var radios = $('input:radio');
radios.change(function() {
// Checked radio's:
radios.filter(':checked').each(function(){
var id = getDropdownId($(this).attr('id'));
$(id).fadeIn();
});
// Unchecked radio's:
radios.filter(':not(:checked)').each(function(){
var id = getDropdownId($(this).attr('id'));
$(id).fadeOut();
});
});
Note that this method does rely on the id's of the radio buttons matching those of the dropdowns (e.g. radio_ban_length for ban_length).
Update: here is a live example: http://jsfiddle.net/55ANB/1/

add id="ban" and id="rank" to your radios
in your jquery section, add the click handler to the radio buttons
$(':radio').click(function() {
if ($(this).attr("id") == "ban") $("ban_length").fadeToggle();
if ($(this).attr("id") == "rank") $("rank_length").fadeToggle();
});