We Keep Coding

Display alert message pop up the to the user when user checked or unchecked the checkbox using angular

Scenario 1: User has initially checked the value for "Automated" and updates the value to unchecked state
Display alert message pops up to the user if at least one of the following accordions is in the "Completed" state.

HTML
<div class="col-md-12 col-sm-12 filter-opn">
<form #checkboxfilt="ngForm" (ngSubmit)="onapplyfilter(checkboxfilt)">
<div >
<div>
<input type="checkbox" name="Success" value="1" ngModel selected ><br>
<label for="Success"> Success</label><br>
</div>
<div>
<input type="checkbox" name="Pending" value="2" ngModel ><br>
<label for="Pending"> Pending</label><br>
</div>
<div>
<input type="checkbox" name="Canceled" value="3" ngModel ><br>
<label for="Canceled"> Canceled</label><br>
</div>
<input type="submit" value="Apply">
<br>
</div>
</form>
</div>
TS
onapplyfilter(checkbox:NgForm){
if((checkbox.value.Success ==''|| checkbox.value.Success==false)
&&(checkbox.value.Pending ==''|| checkbox.value.Pending==false)
&&(checkbox.value.Canceled ==''|| checkbox.value.Canceled==false))
{
alert('CheckBox is Empty');
}
}
}

How to get checkbox value in multicheckbox onchange event

I have created two custom fields on woocommerce checkout page. First Field is text and second is multicheckbox. I want both fields to show output on same page using Onchange event.
Text Field code is
<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm11 wooccm-type-text validate-required woocommerce-validated" id="billing_wooccm11_field" data-priority="50">
<label for="billing_wooccm11" class="">Other NAME <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text wooccm-required-field" name="billing_wooccm11" id="billing_wooccm11" placeholder="" value="" data-required="1">
</span>
</p>
I have used this code to display value of text field
<script>
document.getElementById("billing_wooccm11").onchange = function() {myFunction()};
function myFunction() {
var input = document.getElementById("billing_wooccm11").value;
document.getElementById("demo").innerHTML = input;
}
</script>
<p id="demo"></p>
It is working and showing value as required. But second field which is multicheckbox is not working
Multicheckbox field code is
<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm14 wooccm-type-multicheckbox validate-required" id="billing_wooccm14_field" data-priority="130">
<label for="billing_wooccm14" class="">PROGRAMME <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<span class="woocommerce-multicheckbox-wrapper" data-required="1">
<label><input type="checkbox" name="billing_wooccm14[]" value="one"> One</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="two"> Two</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="three"> Thress</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="Four"> four</label>
</span>
</span>
</p>
I want to display text of checkbox just like text field. So when any checkbox is checked its value should appear and if user unchecked it, its text should also disappear.

I have a way to go about this, let's say we have these two input checkbox buttons. first, you must iterate through the buttons you have using the name attribute.
<input type="checkbox" class="myinput" name="input_check" value="one">
<input type="checkbox" class="myinput" name="input_check" value="two">
then for the js code:
document.querySelector('[name="input_check"]').onchange = function() {myFunction()};
function myFunction(){
var checkbox = document.querySelectorAll('.myinput');
for(let i=0; i<checkbox.length; i++)
if (checkbox[i].checked)
document.getElementById('demo').innerHtml = checkbox[i].value;
}
I hope this works for you :)

On radio button click, show/hid divs with dynamicaly changed IDs or classes

<div class="">
#foreach($result->package as $package) //listing all packages from DB using Laravel's Blade template
<input id="id_radio{{$package->id}}" type="radio" value="{{$package->id}}" name="radio"
>{{$package->name}} <br>
<div class="" id="package{{$package->id}}">
#foreach($package->price_option as $price_option)
Price Option: <input type="radio" value="{{$price_option->id}}"
name="radio">{{$price_option->id}} <br>
<div class="">
#foreach($price_option->values as $value)
Values: {{$value->value}} <br>
#endforeach
</div>
#endforeach
</div>
#endforeach
</div>
Page Source:
<div class="">
<input id="id_radio22" type="radio" value="22" name="radio"
>Package 1 <br>
<div class="" id="package22">
Price Option: <input type="radio" value="75"
name="radio">75 <br>
<div class="">
Values: Dummy text <br>
Values: Dummy text 2 <br>
</div>
Price Option: <input type="radio" value="78"
name="radio">78 <br>
<div class="">
Values: Dummy text <br>
Values: Dummy text 2 <br>
</div>
</div>
<input id="id_radio23" type="radio" value="23" name="radio"
>Package 2 <br>
<div class="" id="package23">
Price Option: <input type="radio" value="76"
name="radio">76 <br>
<div class="">
Values: a <br>
Values: b <br>
Values: c <br>
</div>
</div>
</div>
What I need is to show all price options as radio buttons when I click on, for example, package 1 radio button, and to show all price options as radio buttons for package2 but at the same time hide price options of Package1.
Then for all Price Options that I click to show all Values that belongs to that Price Option.
Currently dont have any CSS or JQuery/JavaScript code

Working fiddle.
Try to hide all the divs (that have id start with package) bellong to the other radio buttons then show just the div belong to the clicked one :
$('div[id^="package"]').hide();
$('body').on('click','input[id^="id_radio"]',function(){
$('div[id^="package"]').hide();
$('#package'+$(this).val()).show();
});
$('div[id^="price_option_div"]').hide();
$('body').on('click','.price_option',function(){
$('div[id^="price_option_div_"]').hide();
$("#price_option_div_"+$(this).val()).show();
});
Hope this helps.

Checkbox forms & JQuery

I'm attempting to create a very short form that will display an alert based on its checked checkbox options.
(See here for my attempt - https://jsfiddle.net/4k2v68mv/4/)
$(document).ready(function() {
// Displays options for alert if checked
$('#mycheckbox1').change(function() {
$('#mycheckboxdiv1').toggle();
$('#displayAlert').toggle();
});
// Displays alert if checked
$('#mycheckbox2').change(function() {
$('#transportAlert').toggle();
});
// Adds options into Dropdown menu
$('.box').hide();
$('#dropdown').change(function() {
$('.box').hide();
$('.' + $(this).val()).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Choose Alert
<input type="checkbox" name="mycheckbox1" id="mycheckbox1" value="0" />
<div id="mycheckboxdiv1" style="display:none">
<form>
<select id="dropdown" name="dropdown">
<option value="0">-- Transport Type --</option>
<option value="area1">Busses</option>
<option value="area2">Trains</option>
<option value="area3">Ferries</option>
</select>
</form>
<div class="box area1">
<form action="">
<input type="checkbox" name="bus" value="1A"> 1A
<br>
<input type="checkbox" name="bus" value="1B"> 1B
<br>
<input type="checkbox" name="bus" value="1C"> 1C
<br>
<br>
<input id="customText" type="text" name="busCustom" placeholder="Custom" />
</form>
</div>
<div class="box area2">
<form action="">
<input type="checkbox" name="train" value="1A"> to London
<br>
<input type="checkbox" name="train" value="1B"> to Southampton
<br>
<br>
<input id="customText" type="text" name="trainCustom" placeholder="Custom" />
</form>
</div>
<div class="box area3">
<form action="">
<input type="checkbox" name="ferry" value="1A"> Isle of Wight
<br>
<br>
<input id="customText" type="text" name="ferryCustom" placeholder="Custom" />
</form>
</div>
</div>
<div id="displayAlert" style="display:none">
<hr>
<input type="checkbox" name="mycheckbox2" id="mycheckbox2" value="0" />
<div id="mycheckboxdiv2" style="display:none">
</div> Display Alert
</div>
<div id="transportAlert"class="alert alert-warning" role="alert" style="display:none">Please note that the .... will be running late today.</div>
For example,
I'd want the alert to say "Please note that the 1A bus will be running late today." - if the 1A checkbox under Busses is the only option checked.
Similarly, "Please note that the 1A & 1B busses will be running late today." - if the 1A and 1B checkboxes under Busses are checked.
...You get the idea.
I've built the basic premise above, however I'm slightly out of my depth when trying to link the checkbox values via JS into a line of text - (and have them slightly vary dependant on number of checked boxes and type of transport)
Many thanks in advance.

Usage of radio value in ID selector

Given this html:
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
<input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
</div>
<div id="stypes">
<div id="input1_div">
<input type="text" id="input1" name="input1" placeholder="input1"/>
</div>
<div id="input2_div" style="display: none;">
<input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
</div>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I use following jQuery to hide/disable input fields based on selected radio buttons:
jQuery('#choices input').each(function() {
var item = this;
$(this).click(function() {
if($('input[type=radio][name=stype]').is(':checked')) {
$('#stypes > div').hide();
$('#stypes input').not("#sbutton").prop('disabled', true);
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
}
});
});
All-in-One in this jsfiddle.
I'm particularly unsure about my technique to incorporate radio value into the id selector:
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
What is the correct way to do it? Other tips regarding my jQuery?

First of all, you don't need a sophisticated jQuery.each loop to bind the click and to define this. In each event handler this will be the caller of the function. In your case it is enough to have click function for all of them.
As you said in comments, it's only matter of presentation. I prefer to have one field instead of two fields. Even I prefer to have a fixed name for this text input, though in order to make it very similar to your example I change the name and placeholder accordingly.
$(function(){
$('#choices input').click(function() {
var newName = $(this).val(),
newPlaceholder = $(this).attr("data-placeholder");
$('#interchangable_input[name!='+newName+']').hide()
.attr("name", newName)
.attr("placeholder", newPlaceholder)
.fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
</div>
<div id="stypes">
<input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
Few more suggestions:
You can use <label for="target id"> for each option label in radio buttons or checkboxes. It will work fine with click event handler, even if the user clicks on the label instead of the button itself.
You can hid some information as data-* attribute in html5. You don't need to necessarily use value.
Update for multiple items
In case of group of multiple items in form, I can imagine a form with different sections or pages. The <fieldset> can be use to group these items. In HTML5 you could just disable the fieldset tag by <fieldset disabled> when you change the form page with jquery. (With exception of IE browsers). Because of this exception we need to disable all items in subforms. In order to handle this part, I defined a class .form-element which applies for all form inputs. You can also use <div> instead of <fieldset>, then you will need to track their enable/disable status.
$(function(){
// initialization by disabling form-elements and hiding them
$("#subforms fieldset[disabled]").hide();
$("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');
// choice tracker
$('#choices input').click(function() {
var $target = $($(this).attr("data-subform")),
$oldElement = $("#subforms fieldset:not([disabled])");
$oldElement.attr('disabled','disabled').hide();
$oldElement.find(".form-element").attr('disabled','disabled');
$target.removeAttr("disabled");
$target.find(".form-element").removeAttr("disabled");
$target.fadeIn();
});
});
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
</div>
<div id="subforms">
<fieldset id="subform1" >
<input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
<input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
</fieldset>
<fieldset id="subform2" disabled>
<input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
<textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
<input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
</fieldset>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>