Hide Fieldset's with JavaScript, when radio-button is checked, without onchange - javascript

I'm trying to hide a specific fieldset when one of the two radio-buttons is checked in a html form.
I use two radio-buttons with the id's: 'forproject' and 'forinternship'.
<form>
<fieldset>
<legend>Sign up</legend>
<label><input type="radio" onchange="hideInternship(this)" id="forproject" name="register" >project</label>
<label><input type="radio" onchange="hideProject(this)" id="forinternship" name="register" >internship</label>
</fieldset>
<fieldset id="project">
</fieldset>
<fieldset id="internship">
</fieldset>
</form>
I wrote two JavaScript functions in an external js.file to hide one of the fieldset's when a radio-button is checked, using onchange (in the html).
function hideProject(x) {
if (x.checked)
{
document.getElementById('project').style.visibility='hidden';
document.getElementById('internship').style.visibility='visible';
}
}
function hideInternship(x) {
if (x.checked)
{
document.getElementById('internship').style.visibility='hidden';
document.getElementById('project').style.visibility='visible';
}
}
Everything is working fine, but i want to control the visibility of those fieldset's completely in the js.file. So there is no onchange or onclick in my html.
Does anyone have a tip?

document.getElementById('forproject').addEventListener('onChange', hideInternship)
function hideInternship(event) {
if (event.target.checked)
{
document.getElementById('internship').style.visibility='hidden';
document.getElementById('project').style.visibility='visible';
}
}
=]

You can "attach" a function to the onclick on your JavaScript file.
A simple (and crude) example of how this works would be to include on your JS external file (and outside of your functions) the following:
document.getElementById('forinternship').onclick = function() {
if (this.checked)
{
document.getElementById('internship').style.visibility='hidden';
document.getElementById('project').style.visibility='visible';
}
}
document.getElementById('forproject').onclick = function() {
if (this.checked)
{
document.getElementById('project').style.visibility='hidden';
document.getElementById('internship').style.visibility='visible';
}
}
With that you can remove the onclick attribute on your HTML elements.
and you can get rid of those functions (they are being created directly on the onclick on the example code).

You can also consider delegation, where a single listener is on a parent element:
window.onload = function() {
document.getElementById('f0').addEventListener('click', function(evt) {
var tgt = evt.target;
if (tgt.id == 'forproject' || tgt.id == 'forinternship') {
document.getElementById('project').style.visibility = document.getElementById('forproject').checked? 'visible':'hidden';
document.getElementById('internship').style.visibility = document.getElementById('forinternship').checked? 'visible':'hidden';
}
});
}
<form>
<fieldset id="f0">
<legend>Sign up</legend>
<label for="forproject"><input type="radio" id="forproject" name="register" >project</label>
<label for="forinternship"><input type="radio" id="forinternship" name="register" >internship</label>
</fieldset>
<fieldset id="project">Project</fieldset>
<fieldset id="internship">Internship</fieldset>
</form>

Related

Enable or disable target element based on checkbox checked state

i'm basically JavaScript newbie and I'm trying to resolve this problem of mine for quite a while. So,i'm doing JS school project and I need to make connection between checkbox and text form. If checkbox is not checked, text form should be disabled and vice versa. This is piece of code I have written:
function cbtf() {
if (document.getElementById('checkbox').checked==false) {
document.getElementById('textform').disabled=true;
}
}
Can anyone write a new code ? That would be much of a help.
Simply attach a method to checkbox's onclick handler:
function enableElement(id, enable) {
document.getElementById(id).disabled=!enable;
}
<label>
<input
type="checkbox"
onclick="enableElement('textform', this.checked)"
/>
ENABLE
</label>
<br/>
<textarea id="textform" style="width:100%; height:200px" disabled>
THIS IS TEXTAREA WITH ID "textform"
</textarea>
or another simplification without creating special one-liner method - just define Your will directy in onclick event:
<label>
<input
type="checkbox"
onclick="document.getElementById('textform').disabled = !this.checked"
/>
ENABLE
</label>
<br/>
<textarea id="textform" style="width:100%; height:200px" disabled>
THIS IS TEXTAREA WITH ID "textform"
</textarea>
You can add a click event to the checkbox, and assign it's check state to the disabled property of the TextBox.
document.querySelector('input[type=checkbox]').onclick = function(e) {
document.querySelector('input[type=text]').disabled = e.target.checked;
};
<input type="checkbox" name="">
<input type="text" name="">
You won't get that to work unless you attach an event to the checkbox, so I would suggest something like this:
var textbox = document.getElementById('textform');
var checkbox = document.getElementById('checkbox');
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
textbox.disabled = false;
} else {
textbox.disabled = true;
}
})

Jquery onclick function called two time on dynamically added button element

I have created a code on my HTML page that their multiple checkboxes and created one button dynamically in js snippet for performing some event, but when I clicked on the button to perform that even that, then it's making calls to that event snippet two times. I wanted to know how to add the event to that button.
Here is the js code:-
$(".panel-body").on("click", '#select_none', function(event) {
$("input[name='nodelevel']:checkbox").each(function() {
this.checked = false;
});
});
Make sure there is only one parent with .panel-body class name. maybe there is two of .panel-body and it makes this happen. like this:
<div class="panel-body">
...
<div class="panel-body">
...
<!-- your selectors -->
</div>
</div>
try stoppropagation to avoid second parent event listener call:
$(".panel-body").on("click", '#select_none', function(event) {
event.stopPropagation();
$("input[name='nodelevel']:checkbox").each(function() {
this.checked = false;
});
});
EDIT : and of course you can add listener to document instead of .panel-body :)
Example:
<input class="itemClass" type="checkbox" name="Items" value="Bike"> I have a bike<br>
<input class="itemClass" type="checkbox" name="Items" value="Car" checked> I have a car<br>
<button name="submit" onclick="getValue()" value="Submit">
Then:
function getValue() {
var id;
var name;
var temp = [];
$('.itemClass').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
console.log(sThisVal);
if (this.checked) {
// $("input[name=Items]:checked").map(function () {
temp.push(sThisVal);
}
});
console.log(temp);
$('.itemCheckboxClass').prop('checked', false);
}

Radio Button to change form inputs

I have two radio buttons each one will toggle different inputs on a form. I've achomplished this using the onclick() function that utilizes hide() but then this require another function with replicated .show() to bring the elements back if the user toggles back and forth. Thought there must be better logic something that is not so redundant, maybe an if toggle value?
Anyways this is what I have:
<labe>
<input type="radio" name="radioReason" onClick="resetPassShow()"> </input
<span class="text">Request profile update (i.e. phone#)</span>
</label>
<label>
<input type="radio" name="radioReason" value="resetPassword" onClick="resetPassRemove;"> </input>
<span class="text">Reset Password or Unlock My Account</span>
</label>
function resetPassRemove(){
$("#prodCategoryLabel").hide();
....
}
function resetPassShow(){
$("#prodCategoryLabel").show();
....
}
Here is the JS Fiddle in action: https://jsfiddle.net/dv5xmw9z/1/
JS
function hideA(x) {
if (x.checked) {
document.getElementById("A").style.visibility = "hidden";
document.getElementById("B").style.visibility = "visible";
}
}
function hideB(x) {
if (x.checked) {
document.getElementById("B").style.visibility = "hidden";
document.getElementById("A").style.visibility = "visible";
}
}
HTML
<input type="radio" onchange="hideB(this)" name="aorb" checked>A |
<input type="radio" onchange="hideA(this)" name="aorb">B
<div id="A">
<br/>A's text</div>
<div id="B" style="visibility:hidden">
<br/>B's text
</div>
use $( ".target" ).toggle(); function.
http://api.jquery.com/toggle/

jquery syntax for .on("change","input[name^=

Project Focus
Toggle Checkbox(es)
Special Requirement
Need to bind the new(dynamically) added div.id container that holds these checkboxes. Note: this div.id has been dynamically generated (client-side).
Status
My Working Fiddle successfully toggles between 1(one) or 0(none) checkboxes.
The HTML
<div id="bind_id">
<input type="checkbox" name="iso_01[]" class="setTitlePre1" value="L/R" />
<label for name "iso_01" class="isoVar1">No.1</label>
<input type="checkbox" name="iso_01[]" class="setTitlePre2" value="Alt" />
<label for name "iso_01" class="isoVar2">No.2</label>
</div>
Working Script
var checkboxes;
checkboxes = $("input[name^=iso_01]").change(function (e) {
checkboxes.not(this).prop("checked", false);
}
});
Desired Result
I'm having trouble with syntax for updating .click() to .on("click","input..." see Bound Fiddle
Updated Script
var checkboxes;
checkboxes = $("#bind_id").on("change", "input[name^=iso_01]", function (e) {
if (this.checked) {
checkboxes.not(this).prop("checked", false);
}
});
Your issue is,
checkboxes = $("#bind_id").on
is not doing what you think it is doing. It is not storing all the matched nodes.
Try this instead:
In the callback, change
checkboxes.not(..)
to
$('input[name^=iso_01]').not(this).prop("checked", false);
Working fiddle
Or if they are loaded dynamically, you can use $('#bind_id').find('input[name^=iso_01]')
This is not what checkboxes are for. You should be using radio buttons:
<input type="radio" name="example" value="1" id="1">
<label for="1">one</label>
<input type="radio" name="example" value="2" id="2">
<label for="2">two</label>
The problem is checkboxes is the #bind_id element, not the checkboxes. You would need to find the children from that element, to get the child checkbox elements.
Working Example:
var wrapper;
wrapper = $("#bind_id").on("change", "input[name^=iso_01]", function (e) {
if (this.checked) {
wrapper.find("input[name^=iso_01]").not(this).prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bind_id">
<input type="checkbox" name="iso_01[]" class="setTitlePre1" value="L/R" />
<label for name "iso_01" class="isoVar1">No.1</label>
<input type="checkbox" name="iso_01[]" class="setTitlePre2" value="Alt" />
<label for name "iso_01" class="isoVar2">No.2</label>
</div>

selecting all or some parent / child checkboxes in a styled format

First of all: http://jsfiddle.net/1q5st19f/
I have a checkbox group where if all the child checkboxes (countries) are checked, the parent checkbox (region) becomes checked as well. Likewise, if the parent checkbox is unchecked, the child checkboxes should be unchecked, too. I found a script that worked perfectly until I styled the checkboxes with prettyCheckable (from http://arthurgouveia.com/prettyCheckable/).
If I remove prettyCheckable, it works. If I add it, it's correctly styled but won't work anymore. What am I doing wrong? I tried to rename the classes but that didn't work either.
The basic markup is like
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Africa
<div class="content">
<input type="checkbox" value="1" name="cntrs[]" class="childCheckBox" data-label=""> Algeria<br />
<input type="checkbox" value="2" name="cntrs[]" class="childCheckBox" data-label=""> Angola<br />
<input type="checkbox" value="3" name="cntrs[]" class="childCheckBox" data-label=""> Benin<br />
</div>
</fieldset>
prettyCheckable made this a bit tricky. It says in the documentation that you can use $('#myInput').prettyCheckable('check'); but I could not get it to work. So I just used the anchors class checked instead to determine if the checkbox is checked.
This may not be the most pretty implementation but it's working. You should make the code more modular an maybe reconsider some of the choices I quickly made.
First I removed the childCheckBox from the HTML and initialized prettyCheckable with options, so I could get the class to the wrapper div:
// make childCheckboxes prettyCheckable
$('.content input:checkbox').each(function () {
$(this).prettyCheckable({
// add this class to the wrapper div created by prettyCheckable
customClass: "childCheckBox"
});
});
Same with the parentCheckbox:
// make parentCheckBox prettyCheckable
$('input:checkbox.parentInput').prettyCheckable({
// add this class to the wrapper div created by prettyCheckable
customClass: "parentCheckBox"
});
I also changed childCheckBox click event to do the functionality you wanted
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(function () {
var $parentAnchor = $(this).parents('fieldset:eq(0)').find('.parentCheckBox a');
var $childAnchors = $(this).parents('fieldset:eq(0)').find('.childCheckBox a');
var $thisAnchor = $(this).find('a');
var parentIsChecked = $parentAnchor.hasClass('checked');
var thisIsChecked = $thisAnchor.hasClass('checked');
var isLastOne = true;
// loop through all childCheckBoxes and determine if this is the last one checked or unchecked
$childAnchors.each(function (index) {
if ((!thisIsChecked && $(this).hasClass('checked'))
|| (thisIsChecked && !$(this).hasClass('checked'))) {
isLastOne = false;
}
});
// if the childCheckBox was the last one, change the state of the parentCheckBox
if (isLastOne && thisIsChecked) {
$parentAnchor.addClass('checked');
} else if (isLastOne && !thisIsChecked) {
$parentAnchor.removeClass('checked');
}
});
I was pretty tired when forking this, so I hope I didn't do any stupid mistakes. If you have any questions about the code, please ask.
Fiddle: http://jsfiddle.net/1q5st19f/17/
This took me forever to debug. There were a number of issues most importantly of which was that you are using a very backlevel version of prettyCheckable. However, after changing to the latest level and starting again, I have a fully working solution for you. See this jsFiddle.
I started again from the beginning but here is the code:
HTML
<fieldset>
<div class="group">
<input type="checkbox" class="parentCheckBox" data-label="Africa"/>
<div class="content">
<input type="checkbox" value="1" class="childCheckBox" data-label="Algeria" />
<br />
<input type="checkbox" value="2" class="childCheckBox" data-label="Angola" />
<br />
<input type="checkbox" value="3" class="childCheckBox" data-label="Benin" />
<br />
</div>
</div>
</fieldset>
JavaScript
$(function () {
$('input:checkbox').each(function () {
$(this).prettyCheckable();
});
$(".parentCheckBox").change(function (e) {
var checked = $(this).prop("checked");
$(".childCheckBox", $(this).closest(".group")).each(function (i, e) {
$(e).prettyCheckable(checked?"check":"uncheck");
});
});
$(".childCheckBox").change(function(e) {
var checkedCount = unCheckedCount = 0;
$(e.currentTarget).closest(".content").find(".childCheckBox").each(function(i,e2) {
if ($(e2).prop("checked")) {
checkedCount++;
} else {
unCheckedCount++;
}
});
if (unCheckedCount == 0) {
$(e.currentTarget).closest(".group").find(".parentCheckBox").prettyCheckable("check");
} else {
$(e.currentTarget).closest(".group").find(".parentCheckBox").prettyCheckable("uncheck");
}
});
});
I'll be delighted to answer any questions you may have.
The semantics of checking or unchecking all children could have an alternate solution shown in this jsFiddle. It talks to when the parent checkbox should be checked or unchecked as a function of the children.
What prettyCheckable does behind the scenes, is it hides the checkboxes and adds an a tag to the page, and updates the hidden checkboxes when the a tag is clicked. The a tag also gets a style of checked when the checkbox is checked. There appears to be a bug though, that the checked class is not added to or removed from the a tag when the state of the checkboxes is manipulated through code. Anyway, your JavaScript was correctly updating the state of the checkboxes, but prettyCheckable wasn't detecting that and failed to update its classes.
Anyway, I rewrote your script so all the logic is handled in 1 event handler, and I included a work-around for the prettyCheckable bug, but I left your HTML alone so you should only have to replace your JavaScript code. See below for a runnable example:
$('input:checkbox').prettyCheckable();
$("input:checkbox").on("change", function() {
var checkbox = $(this);
var parent = checkbox.closest("fieldset");
if (checkbox.hasClass("parentCheckBox")) {
//this is a parent, check or uncheck all children
var isChecked = checkbox.is(":checked");
//add checked attribute in the DOM and add the class for prettyCheckable on all children
parent.find("input.childCheckBox:checkbox").prop("checked", isChecked).each(function() {
if (isChecked)
$(this).next("a").addClass('checked');
else
$(this).next("a").removeClass('checked');
});
} else {
//this is a child, check or uncheck the parent
var parentCheckbox = parent.find("input.parentCheckBox:checkbox");
var isChecked = !parent.find("input.childCheckBox:checkbox").get().some(function(item) {
return !$(item).is(":checked");
});
//add the checked attribute to the dom and add the class for prettyCheckable
parentCheckbox.prop("checked", isChecked);
if (isChecked)
parentCheckbox.next("a").addClass('checked');
else
parentCheckbox.next("a").removeClass('checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://qfuse.com/js/utils/prettyCheckable/prettyCheckable.js"></script>
<link href="http://arthurgouveia.com/prettyCheckable/js/prettyCheckable/dist/prettyCheckable.css" rel="stylesheet"/>
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Africa
<div class="content">
<input type="checkbox" value="1" name="cntrs[]" class="childCheckBox" data-label="" /> Algeria<br />
<input type="checkbox" value="2" name="cntrs[]" class="childCheckBox" data-label="" /> Angola<br />
<input type="checkbox" value="3" name="cntrs[]" class="childCheckBox" data-label="" /> Benin<br />
</div>
</fieldset>

Categories