Checkbox Hidden Div Unchecked - javascript

I have a checkbox hidden div with text field. If checkbox is checked this text field will showed, but if checkbox unchecked text field not show. This Code :
<script type="text/javascript">
$(function () {
$("input[name='checkbox1']").click(function () {
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
$("#dvcheckbox1").hide('lainnya');
}
});
});
</script>
<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1" style="display: none;">
<?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>
But, How this checkbox is checked if there something value on textfield? and text field shown. Because in form Update, value was show but checkbox is checked. I want checkbox is checked
For example Like this:
Click to show example

Instead use with change event with .toggle(boolean) method:
// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
var $v = $(this).find('input').val();
$("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
return $v.trim().length !== 0;
});
$("input[name='checkbox1']").change(function () {
$("#dvcheckbox1").toggle(this.checked);
});

There are a few things here:
1 - Better if you use document ready, because it waits until all the elements are loaded.
2 - You should hide the element$("#dvcheckbox1").hide('lainnya') when the page is loaded.
3 - A listener in the input:text is a good idea. It enables the checkbox if the textbox is empty.
Please, have a look at the next piece of code:
<div>
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1">
<label for="myValuye"/>
<input type="text" id="myValue" name="myValue" value=""/>
</div>
</div>
<script>
$(document).ready(function() {
$("input[name='checkbox1']").click(function () {
// Always use some logs to check what line are you reaching.
console.log("Clicked checkbox!!!");
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
console.log("Value: " + $("#myValue").val());
$("#dvcheckbox1").hide("lainnya");
}
});
$("#myValue").bind("change paste keyup", function() {
if ($(this).val() == "") {
$("#checkyes1").removeAttr("disabled");
} else {
$("#checkyes1").attr("disabled", true);
}
});
// First of all we hide the #dvcheckbox1
$("#dvcheckbox1").hide('lainnya');
})

Related

How to hide and unhide form fields based on a radio button?

I'm trying to implement a radio button, which if clicked should get more options for the user to fill in.
Here's what I've tried.
<script>
function addmentor() {
if ( document.getElementById("type_Computer").checked ) {
document.getElementById('nextSetOfComputerOptions').style.display = "";
} else {
document.getElementById('nextSetOfComputerOptions').style.display = "none";
}
}
</script>
<input type="radio" name="type" id="type_computer" value="Computer" onClick="addmentor()">Add Mentor</button>
<div id="nextSetOfComputerOptions" style="display:none;">
.
.
</div>
The above code doesn't work. When I am clicking the radio button, nothing happens, the part of the form is always hidden.
EDIT: I originally misunderstood the question and have now adjusted my answer.
Additionally, I have also included a function that will hide your input if another radio button is clicked.
See the snippet below:
//your checkbox
var checkbox = document.getElementById("type_computer");
//your div
var inputDiv = document.getElementById("nextSetOfComputerOptions");
//function that will show hidden inputs when clicked
function addmentor() {
if (checkbox.checked = true) {
inputDiv.style.display = "block";
}
}
//function that will hide the inputs when another checkbox is clicked
function hideInputDiv() {
inputDiv.style.display = "none";
}
<input type="radio" name="type" id="type_computer" value="Computer" onChange="addmentor();" ">Add Mentor</input>
<input type="radio" name="type" onClick="hideInputDiv();">Other radio input</input>
<div id="nextSetOfComputerOptions" style="display: none;">
<input placeholder="PC"></input>
<input placeholder="Mac"></input>
</div>

Radio button is showing div on selection but not hiding after selecting a different radio button

I have three divs I want to show based on a radio selection. I've written the below script, but the problem I've run into is the div doesn't hide after a different radio button is selected. I'm using ucalc so I can't change the class names or ids of the divs or the radio buttons so have to work with that.
Note, the radio button is automatically selected when the form loads so the first div needs to be showing initially.
Code below:
$(document).ready(function(){
// First Div/Radio Button
$('#input_radio-30-0-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
// Second Div/Radio Button
$("#grid-44-46").hide();
$('#input_radio-30-1-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
// Third Div/Radio Button
$("#grid-46-48").hide();
$('#input_radio-30-2-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-46-48").show();
} else {
$("#grid-46-48").hide();
}
});
});
I'm not very familiar with writing javascript (you can probably tell!) so an explanation for 'dummies' would be appreciated!
Thank you for your help!
You need to hide 2nd & 3rd div by CSS and when user change other button then find ID so according to ID show that div and rest div will hide as below snippet.
$(document).ready(function(){
$('#input_radio-30-0-des, #input_radio-30-1-des, #input_radio-30-2-des').on('change', function(){
var getid = $(this).attr('id');
if (getid=='input_radio-30-0-des') {
$('#grid-44-46, #grid-46-48').hide()//2nd and 3rd div hide
$("#grid-40-42").show();
}
if (getid=='input_radio-30-1-des') {
$('#grid-40-42, #grid-46-48').hide()//1st and 3rd div hide
$("#grid-44-46").show();
}
if (getid=='input_radio-30-2-des') {
$('#grid-40-42, #grid-44-46').hide()//1st and 2rd div hide
$("#grid-46-48").show();
}
})
});
#grid-44-46, #grid-46-48{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="div-show-hide" id="input_radio-30-0-des" checked> Button One</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-1-des"> Button Two</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-2-des"> Button Three</label>
<div id="grid-40-42"><h2>Show - Div One</h2></div>
<div id="grid-44-46"><h2>Show - Div Two</h2></div>
<div id="grid-46-48"><h2>Show - Div Three</h2></div>
Use wild card to hide all <div> which id start with grid- on radio change.
$("[id^=grid-]").hide();
$('#input_radio-30-0-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
$('#input_radio-30-1-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='input_radio-30-0-des' name="group1" />
<div id='grid-40-42'>grid-40-42</div>
<input type='radio' id='input_radio-30-1-des' name="group1" />
<div id='grid-44-46'>grid-40-46</div>
Note
No need multi-pal $(document).ready(function(){ .
Id must be unique.
I'm using a Javascript object to match each Radio button with it's targeted div.
I assume they are hidden by default. Just having fun and giving an alternative to multiple checks! A cleaner code also where you could easily setup all those confusing names...
$( document ).ready(function() {
let matches = {
"input_radio-30-0-des": 'grid-40-42',
"input_radio-30-1-des": 'grid-44-46',
"input_radio-30-2-des": 'grid-46-48'
};
$(":input[name='FM']").on("change", function () {
var target= matches[$(this).attr('id')];
$('#' +target).toggle($(this).checked);
$("[id^=grid-]").not('#' +target).hide();
})
});
div[id*='grid-'] { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="FM" id="input_radio-30-0-des" value="0"/>
<label for="input_radio-30-0-des">0</label>
<input type="radio" name="FM" id="input_radio-30-1-des" value="1"/>
<label for="input_radio-30-1-des">1</label>
<input type="radio" name="FM" id="input_radio-30-2-des" value="2"/>
<label for="input_radio-30-2-des">2</label>
<div id="grid-40-42">40-42</div>
<div id="grid-44-46">44-46</div>
<div id="grid-46-48">46-48</div>

check box checked javascript

I am trying to set a value in a text box based on whether the checkbox is checked or not
The function is attached to onclick of the checkbox
This simple thing is not working :(
<div>
MyCheckbox
<input type="checkbox" id="Check1" name="FirstCkName"
onclick="testCheckbox(Check1,TextBx1)" />
</div><br>
<div>
CheckBx Text Box
<input id="TextBx1" name="CheckBxName" type="text" />
</div><br>
<script>
function testCheckbox(oCheckbox,oTxtbox)
{
if (oCheckbox.checked == true)
{
document.getElementById("oTxtbox").value=1;
}
else
{
document.getElementById("oTxtbox").value="";
}
}
</script>
Link to JSfiddle https://jsfiddle.net/JS_learner/2750639m/30/
Do something like.
var checkBox = document.getElementById("Check1");
checkBox.addEventListener("click", function(e) {
if (e.target.checked) {
document.getElementById("TextBx1").value = 1;
} else {
document.getElementById("TextBx1").value = "";
}
});
<div>
MyCheckbox
<input type="checkbox" id="Check1" name="FirstCkName" />
</div><br>
<div>
CheckBx Text Box
<input id="TextBx1" name="CheckBxName" type="text" />
</div>
The problem is this line:
onclick="testCheckbox(Check1,TextBx1)"
Here you're inventing your own parameters. That won't Work. The 'click' event is a predefined Mousevent, which will give an 'event' argument.
The 'event.target' will be the element you clicked.
This is how you should define this eventhandler:
onclick="testCheckbox"
Now you can write your script like this:
function testCheckbox(event)
{
if (event.target.checked == true)
{
document.getElementById("oTxtbox").value=1;
}
else
{
document.getElementById("oTxtbox").value="";
}
}

Javascript - check/uncheck checkbox after summing different inputs

I have a ‘parent’ <div>, and ‘child’ divs which are shown after clicking parent <div>.
All divs have <checkboxes> and <input> to put quantity.
Parent <checkbox> checks when at least one child <checkbox> is checked.
When child <checkbox> is checked/unchecked the quantity in <input> is automatically changed into ‘1’ or ‘’.
Parent quantity <input> is disabled and it is supposed to show the sum of all children quantities.
I have two problems.
First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child <checkbox>) the summing script does not react on such change.
Secondly I wasn’t able to uncheck the parent <checkbox> when all child checkboxes are unchecked.
However I’m assuming if the summing script will start working properly I will be able to bind the parent <checkbox> with the sum (if (sum> 0){ $('#checkbox0').prop('checked', true);}else{$('#checkbox0').prop('checked', false);}
Html:
<div class="divCell" id="click1">
<div class="checkbox_div" style='pointer-events:none;'>
<input type="checkbox" id="checkbox0">
</div>
<div class="div_name_divcell">Parent - click to open</div>
<div class="div_quantity_divcell">
<input type="text" name="parent_1" class="quantity_class_parent_1" id="quantity_parent_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)" disabled="disabled">
</div>
</div>
<div id="hidden1" style="display: none;">
<div class="divCell" id="child_click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
</div>
<div class="div_name_divcell">Child1</div>
<div class="div_quantity_divcell">
<input type="text" name="child_1" class="quantity_class_child" id="quantity_child_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
</div>
</div>
<div class="divCell" id="child_click2">
<div class="checkbox_div">
<input type="checkbox" id="checkbox2">
</div>
<div class="div_name_divcell">Child2</div>
<div class="div_quantity_divcell">
<input type="text" name="child_1" class="quantity_class_child" id="quantity_child_2" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
</div>
</div>
</div>
Css:
.divCell {width: 500px;height: 35px;margin: 2px 0;display: inline-block;background-color: #D4F78F;}
.div_quantity_divcell{float:right; padding:9px 1px 0 0}
.checkbox_div {width: 25px;position: relative;margin: 5px;float: left;}
.div_name_divcell {line-height: 35px;width: auto;float: left;}
JavaScript:
$(document).ready( function() {
event.preventDefault();
$('#checkbox1').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
}else{
$('#quantity_child_1').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_1').keyup(function(){
$('#checkbox1').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
//second child
$('#checkbox2').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_2').val('1')
}else{
$('#quantity_child_2').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_2').keyup(function(){
$('#checkbox2').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
});
// suming script
$(document).on('change', '.quantity_class_child', function(){
var sum = 0;
$('.quantity_class_child').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
});
//opening script
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
JSFiddle: https://jsfiddle.net/mamzj4tw/6/
This is an updated version of your version
https://jsfiddle.net/mamzj4tw/13/
It uses each() to better (and clean) add actions to inputs.
You can create your custom events like do-sum and fire when you want.
In this case I defined that the sum is executed when
$(document).trigger('do-sum');
fires do-sum event.
and I've set a listener that executes your routine:
$(document).on('do-sum', function(){
var sum = 0;
$('.quantity_class_child.active').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
var parentChecked = false;
$('#hidden1 input[type="checkbox"]').each(function(i, e){
if($(e).is(':checked')) {
parentChecked = true;
}
});
$('#checkbox0').prop('checked', parentChecked);
});
I also use class active to set valid inputs (and quick sum them).
PS you don't need event.preventDefault(); after document ready event.
Ok, Here are the things that you can do to achieve,
First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child ) the summing script does not react on such change.
The thing is change event will not be triggered if you are setting/changing the value from the javascript. For this you can manually call the change event to trigger the effect. Or, Create a separate function for summation calculation and call it on uncheck event of the checkbox.
eg.
Either
$('#checkbox1').click(function() {
if (this.checked) {
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
} else {
$('#quantity_child_1').val('')
$(".quantity_class_child").trigger("change");
//$('#checkbox0').prop('checked', false);
}
});
OR
$('#checkbox1').click(function() {
if (this.checked) {
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
} else {
$('#quantity_child_1').val('');
summation();
}
});
function summation(){
var sum = 0;
$('.quantity_class_child').each(function() {
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
}
Now for the second part,
Secondly I wasn’t able to uncheck the parent when all child checkboxes are unchecked.
Just check the length of the checked input box during the summation process and uncheck it if the the length is zero.
Hope this help you cause.
Your code was a bit to complicated, so i have rewritten what you tried to archive ( without the css part). fiddle here
three little html div's
<div class="parent" id="parent">
<span class="input">
<input type="checkbox" name="parent" value="">
<label for parent>parent - click to open</label>
<input type="text" name="sum">
</span>
</div>
<div class="child" id="child1">
<span class="input">
<input type="checkbox" class="inputCheckbox" name="child1" value="child1">
<input type="text" class="inputSum" name="sum1">
</span>
</div>
<div class="child" id="child2">
<span class="input">
<input type="checkbox" class="inputCheckbox" name="child2" value="child2">
<input type="text" class="inputSum" name="sum2">
</span>
</div>
and a bit of jquery
$('.child').hide();
// check if parent checkbox is checked
$('input[name="parent"]').click ( function () {
if ( $(this).is(':checked') ) $('.child').show(); else $('.child').hide();
})
// check if childcheckbox is checked , if true trigger keyup and sum
$('.inputCheckbox').on ( 'change', function () {
if ( $(this).is(':checked') ) $(this).next().val('1').keyup();
// if not , trigger parent
if ( ! $('.inputCheckbox').is(':checked') ) $('input[name="parent"]').click ();
})
// check if value is entered and sum it on keyup
$('.inputSum').on('keyup', function () {
var sum = 0;
$('.inputSum').each ( function () { sum += ( $(this).val() - 0) })
$('input[name="sum"]').val(sum)
})
HTH
You can add new elements https://jsfiddle.net/mamzj4tw/34/
$(document).ready( function() {
$('.drop-down #checkbox').on('change',function(){
$(this).closest('.divCell').find('#quantity_child')
.val(this.checked ? 1:'').trigger('keyup');
});
$(document).on('keyup click', '.quantity_class_child', function(){
$(this).closest('.divCell').find('#checkbox').prop("checked",+$(this).val());
var sum = 0;
$('.quantity_class_child').each(function(){sum += +$(this).val()});
$('#quantity_parent_1').val(sum ||'');
$('#checkbox0').prop("checked", sum);
});
$('#click1').click(function() { $('#hidden1').toggle(500); });
});

Input field hidden dynamically can not be shown later

I have a form with a text input and a radio button pair used to select yes/no. For purposes of keeping this simple, the radio button click event checks the value and if yes, it shows the input text field. If no, it hides the input field. I also check the initial state on document ready and show/hide the input text field.
I find that clicking No results in the input hiding using a jQuery .hide() method. But when I select Yes the resulting .show() method call does not show the input. If I set the radio to Yes and then refresh the page then the input shows up just fine.
Firebug show no input tag. It's like clicking No radio deleted the input from the DOM.
Here's the JS code sample:
$(document).ready(function() {
if ($('#cost_sharing_yes').attr('checked') == 'checked') {
$('input#Institutional_CS_TP').show();
} else {
$('input#Institutional_CS_TP').hide();
}
$('#cost_sharing_yes').click(function() {
$('input[id="Institutional_CS_TP"]').show();
});
$('#cost_sharing_no').click(function() {
$('input#Institutional_CS_TP').fadeOut("fast");
});
}
You are missing ) for closing ready function:
$(document).ready(function() {
} // <--
For getting the checked property of the inputs perperly you should use prop method instead of attr.
$(document).ready(function() {
var isChecked = $('#cost_sharing_yes').prop('checked');
$('#Institutional_CS_TP').toggle(isChecked);
// ..
})
I figured out my problem. It was a self-inflicted coding problem.
To keep the example simple I had removed another function call in the mix that I didn't think had any bearing on the problem. I was wrong. In that function I had
$('td#Institutional_CS_TP).text('$0');
$('input[name="Institutional_CS_TP"]').val('0.00');
This resulted in only the td value showing, not the input inside that same td.
Both my td and the input tags inside the td had the same ID values...not a good idea.
html code
<div id="myRadioGroup">
Value Based<input type="radio" name="cars" value="2" />
Percent Based<input type="radio" name="cars" value="3" />
<br>
<div id="Cars2" class="desc" style="display: none;">
<br>
<label for="txtPassportNumber">Commission Value</label>
<input type="text" id="txtPassportNumber" class="form-control" name="commision_value" />
</div>
<div id="Cars3" class="desc" style="display: none;">
<br>
<label for="txtPassportNumber">Commission Percent</label>
<input type="text" id="txtPassportNumber" class="form-control" name="commision_percent" />
</div>
</div>
Jquery code
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function myFunction1() {
var y = document.getElementById("myInput1");
if (y.type === "password") {
y.type = "text";
} else {
y.type = "password";
}
}

Categories

Resources