Develop Reference

Checkbox check all is not working correctly

I have a form field where I have two fields one containing countries and other containing memberships and both have check boxes. The problem is that with the code I am using to Select All the countries (check/uncheck all the check boxes for countries) also checks or unchecks the memberships field. I want to differentiate between the two so that I only check countries and not the check boxes in the membership field.
Here is the code I am using:
$("#checkCountries").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
EDIT: HTML PART
<tr>
<th>Target Memberships</th>
<td>
<div class="target-memberships col-sm-8">
<input type="checkbox" value="1" name="memberships[]" checked> Standard<br>
<input type="checkbox" value="2" name="memberships[]" checked> Premium<br>
<input type="checkbox" value="3" name="memberships[]" checked> Elite<br>
</div>
</td>
</tr>
<tr>
<th>Target Countries</th>
<td>
<input type="checkbox" id="checkCountries" checked> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br>
<input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br>
<input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br>
<input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br>
<input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br>
<input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br>
</div>
</td>
</tr>
Here, input:checkbox is making the code to work on all the checkboxes in the page. I think I need to change this to make it work specifically for that particular field (countries) only. Please help.

If your HTML is like this:
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
In HTML, each id must be unique. The name can be the same as you have to define the array: country[], but the id must be unique to each element. Since input has no closing tag, it is best to add that to the end of the tag, <input type="checkbox" /> for example.
You can use this:
$("#checkCountries").click(function(){
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
This targets the Class selector target-countries and the input elements within that are of a type checkbox. It will then set the property checked to match the value of the current checkbox.
Working Snippet:
$(function() {
$("#checkCountries").click(function() {
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
});
.target-countries {
margin: 3px;
border: 1px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
Hope that helps.

how to check whether all radio and range selected or not before clicking submitting

How to check whether all radio button checked or not before clicking the submit button. i want to know how to do these things in JQUERY.
let me know the answer
HTML FILE:
<div class="col datepicker">
<p class="question">1. what is birth date ?</p>
<input type="date" value="select date">
<span class="error">Must pick date</span>
</div>
<div class="col Dragger">
<p class="question">2. how much you like us?</p>
<div class="range range-positive range-background-dark">
<input type="range" name="volume" min="{{range.min}}" max="{{range.max}}" value="{{range.value}}" ng-change="sliding(range.value)" ng-model="range.value">
</div>
<ul>
<li><strong>Unlikely</strong></li>
<li><strong>{{range.result}}</strong></li>
<li><strong>Verylikely</strong></li>
</ul>
</div>
<div class="col smileyrating">
<p class="question">3. How was your visit ?</p>
<input type="radio" name="emotion" value="1" id="good" class="input-hidden" required />
<label for="good">
<img class="good" src="img/good.png">
</label>
<input type="radio" name="emotion" value="3" id="ok" class="input-hidden" required />
<label for="ok">
<img class="ok" src="img/Okay.png">
</label>
<input type="radio" name="emotion" value="5" id="bad" class="input-hidden" required />
<label for="bad">
<img class="bad" src="img/bad.png">
</label>
</div>
<div class="col selectTable">
<p class="question">4.are you willing to travel?</p>
<table>
<tr>
<td>
<input type="radio" name="check" id="yes" class="input-hidden" value="0" required="">
<label for="yes">Yes</label></td>
<td>
<input type="radio" name="check" id="no" class="input-hidden" value="1" required="">
<label for="no">No</label></td>
</tr>
</table>
</div>
<div class="col matrixTable">
<p class="question">4.how you maintain </p>
<table>
<tr><th><h5>Economic</h5></th></tr>
<tr>
<td><input type="radio" name="Ecomomic" value="0"><br><span>strong</span></td>
<td><input type="radio" name="Ecomomic" value="1"><br><span>verystrong</span></td>
<td><input type="radio" name="Ecomomic" value="2"><br><span>strong</span></td>
<td><input type="radio" name="Ecomomic" value="3"><br><span>veryweek</span></td>
<td><input type="radio" name="Ecomomic" value="4"><br><span>notsure</span></td>
</tr>
<tr><th><h5>Healthcare</h5></th></tr>
<tr>
<td><input type="radio" name="Healthcare" value="0"><br><span>strong</span></td>
<td><input type="radio" name="Healthcare" value="1"><br><span>verystrong</span></td>
<td><input type="radio" name="Healthcare" value="2"><br><span>strong</span></td>
<td><input type="radio" name="Healthcare" value="3"><br><span>veryweek</span></td>
<td><input type="radio" name="Healthcare" value="4"><br><span>veryweek</span></td>
</tr>
<tr><th><h5>Immigration</h5></th></tr>
<tr>
<td><input type="radio" name="Immigration" value="0"><br><span>strong</span></td>
<td><input type="radio" name="Immigration" value="1"><br><span>verystrong</span></td>
<td><input type="radio" name="Immigration" value="2"><br><span>strong</span></td>
<td><input type="radio" name="Immigration" value="3"><br><span>veryweek</span></td>
<td><input type="radio" name="Immigration" value="4"><br><span>veryweek</span></td>
</tr>
</table>
</div>
<div class="col thumbrating">
<p class="question">5. How was your visit ?</p>
<input type="radio" name="emotion" value="1" id="like" class="input-hidden" required />
<label for="like">
<img class="good" src="img/Like.png">
</label>
<input type="radio" name="emotion" value="3" id="unlike" class="input-hidden" required />
<label for="unlike">
<img class="bad" src="img/Unlike.png">
</label>
</div>
</div>
if possible please let me know how to do in angularjs also.

Javascript/HTML - Passing function return variable into a hidden input value

I've read heaps of posts about this and I'm still having issues with passing the return variable from my function to a hidden input value. The function is checking all radio buttons on the page (12 of them) and finding the one which is selected. It is either passing NULL or the javascript to screen.php. I have tested the checked() function and it works (used alert() to show the value). I've read heaps of posts on passing values to hidden inputs and none of those solutions have worked for me.
If you need to see more code, I can post it on pastebin.
<script language="text/javascript">
function checked()
{
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return valueSelected;
}
</script>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>KSM</h1>
</div>
</div>
<div id="buttons">
<ul>
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="1" />
<input type="hidden" name="status" value="READY" />
<input type="hidden" name="pickupid" id="pickupid" value="" />
<input type="submit" class="submit" name="READY" onclick="document.getElementById('pickupid').value = checked();">
</form>
<div id="search">
<ul id="nav">
<li class="tab1">Ordered</li>
</ul>
</div>
<div id="content">
<div id="container">
<table>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="5" value="005" />
<label for="5"> <span>005</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="6" value="006" />
<label for="6"> <span>006</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="7" value="007" />
<label for="7"> <span>007</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="8" value="008" />
<label for="8"> <span>008</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="9" value="009" />
<label for="9"> <span>009</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="10" value="010" />
<label for="10"> <span>010</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="11" value="011" />
<label for="11"> <span>011</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="12" value="012" />
<label for="12"> <span>012</span> </label>
</td>
</tr>
</table>
</div>
</div>
</body>

What's going on with the current code you have is you're submitting the form before the JS has time to execute your function and put the data into the hidden input. I wouldn't really suggest doing it in the way you're doing now, but here's a quick fix.
In your HTML change the form to this
<form id="form_ready" method="post" action="../backend/screen.php" onsubmit="return checked()">
And in your JS change your checked function to:
function checked(){
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return (document.getElementById('pickupid').value = valueSelected);
}
Also, get rid of the onclick on that submit button.

How to output the price when clicking the radio button?

<fieldset style="width:240 px">
<legend>Food order</legend>
<fieldset style="width:240 px">
<legend>Nasi Lemak</legend>
<p>
<input type="radio" name="j" value="2"
onclick="calculate();" />
<label for='small' class="inlinelabel">
Small</label>
(RM2)
</p>
<p>
<input type="radio" name="j" value="3"
onclick="calculate();" />
<label for='regular' class="inlinelabel">
Regular</label>
(RM3)
</p>
<p>
<input type="radio" name="j" value="4"
onclick="calculate();" />
<label for='large' class="inlinelabel">
Large</label>
(RM4)
</p>
<tr>
<td>Price = </td>
<td><output type="number" name="price" id="output"></output></td>
</tr>
</fieldset>
<script type="text/javascript">
calculate()
{
}
</script>
Does anyone know how to output the price when clicking the radio button ? Let say if i choose Small then it will display the output Rm2...for example Price = Rm 2....i have no idea how to continue it...i will very appreciate it if someone help me solve this...thanks ~

You can pass as parameter this in calculate function(this refers to the element).
Using jquery:
function calculate(obj) {
$("output").text(obj.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset style="width:240 px">
<legend>Food order</legend>
<fieldset style="width:240 px">
<legend>Nasi Lemak</legend>
<p>
<input type="radio" name="j" value="2" onclick="calculate(this);" />
<label for='small' class="inlinelabel">
Small</label>
(RM2)
</p>
<p>
<input type="radio" name="j" value="3" onclick="calculate(this);" />
<label for='regular' class="inlinelabel">
Regular</label>
(RM3)
</p>
<p>
<input type="radio" name="j" value="4" onclick="calculate(this);" />
<label for='large' class="inlinelabel">
Large</label>
(RM4)
</p>
<tr>
<td>Price =</td>
<td>
<output type="number" name="price" id="output"></output>
</td>
</tr>
</fieldset>
Using plain js:
function calculate(obj) {
document.getElementById("output").innerHTML = obj.value;
}
<fieldset style="width:240 px">
<legend>Food order</legend>
<fieldset style="width:240 px">
<legend>Nasi Lemak</legend>
<p>
<input type="radio" name="j" value="2" onclick="calculate(this);" />
<label for='small' class="inlinelabel">
Small</label>
(RM2)
</p>
<p>
<input type="radio" name="j" value="3" onclick="calculate(this);" />
<label for='regular' class="inlinelabel">
Regular</label>
(RM3)
</p>
<p>
<input type="radio" name="j" value="4" onclick="calculate(this);" />
<label for='large' class="inlinelabel">
Large</label>
(RM4)
</p>
<tr>
<td>Price =</td>
<td>
<output type="number" name="price" id="output"></output>
</td>
</tr>
</fieldset>

Try it
document.getElementsByName("j").addEventListener("change", function(){
document.getElementById("price").innerHTML = this.value;// Show the value in output element
//or
var myRadioValue= this.value; //for some calculate
});

how to keep checked items at top of list

i have a long list with a grouped items , my visitors choose items from this list and submit the form , i need to keep the checked items at the top of the list after they submit the form or on page load , because that make them know which items they have chosen before at any time they get into the form without scrolling the whole list
my list with checked items looks like :
<div class="main-div">
<div class="group-title"><span>group one title</span></div>
<div class="items"><input type="checkbox" id="item-1" value="1" name="item_name[]" ><label for="item-1">item1</label></div>
<div class="items"><input type="checkbox" id="item-2" value="2" name="item_name[]" ><label for="item-2">item2</label></div>
<div class="items"><input type="checkbox" id="item-3" value="3" name="item_name[]" checked ><label for="item-3">item3</label></div>
<div class="items"><input type="checkbox" id="item-4" value="4" name="item_name[]" ><label for="item-4">item4</label></div>
<div class="items"><input type="checkbox" id="item-5" value="5" name="item_name[]" checked ><label for="item-5">item4</label></div>
<div class="group-title"><span>group two title</span></div>
<div class="items"><input type="checkbox" id="item-6" value="6" name="item_name[]" ><label for="item-6">item6</label></div>
<div class="items"><input type="checkbox" id="item-7" value="7" name="item_name[]" ><label for="item-7">item7</label></div>
<div class="items"><input type="checkbox" id="item-8" value="8" name="item_name[]" checked ><label for="item-8">item8</label></div>
<div class="items"><input type="checkbox" id="item-9" value="9" name="item_name[]"checked ><label for="item-9">item9</label></div>
<div class="items"><input type="checkbox" id="item-10"value="10" name="item_name[]"><label for="item-10">item10</label></div>
</div>
i need it to look like a following :
<div class="main-div">
<div class="items"><input type="checkbox" id="item-3" value="3" name="item_name[]" checked ><label for="item-3">item3</label></div>
<div class="items"><input type="checkbox" id="item-5" value="5" name="item_name[]" checked ><label for="item-5">item4</label></div>
<div class="items"><input type="checkbox" id="item-8" value="8" name="item_name[]" checked ><label for="item-8">item8</label></div>
<div class="items"><input type="checkbox" id="item-9" value="9" name="item_name[]" checked ><label for="item-9">item9</label></div>
<div class="group-title"><span>group one title</span></div>
<div class="items"><input type="checkbox" id="item-1" value="1" name="item_name[]" ><label for="item-1">item1</label></div>
<div class="items"><input type="checkbox" id="item-2" value="2" name="item_name[]" ><label for="item-2">item2</label></div>
<div class="items"><input type="checkbox" id="item-4" value="4" name="item_name[]" ><label for="item-4">item4</label></div>
<div class="group-title"><span>group two title</span></div>
<div class="items"><input type="checkbox" id="item-6" value="6" name="item_name[]" ><label for="item-6">item6</label></div>
<div class="items"><input type="checkbox" id="item-7" value="7" name="item_name[]" ><label for="item-7">item7</label></div>
<div class="items"><input type="checkbox" id="item-10" value="10" name="item_name[]"><label for="item-10">item10</label></div>
</div>

Try
jQuery(function($){
$('.main-div .group-title').each(function(){
$(this).nextUntil('.group-title', '.items').data('group', this);
});
$('.main-div .items').has('input:checked').prependTo('.main-div');
$('.main-div').on('change', 'input',function(){
var $item = $(this).closest('.items');
if(this.checked){
$item.insertBefore($('.main-div .group-title').first())
}else{
$item.appendTo($item.data('group'))
}
});
})
Demo: Fiddle

You can actually use jQuery's before and after code. It looks like this:
function swapElements(elm1, elm2) {
var parent1, next1,
parent2, next2;
parent1 = elm1.parentNode;
next1 = elm1.nextSibling;
parent2 = elm2.parentNode;
next2 = elm2.nextSibling;
parent1.insertBefore(elm2, next1);
parent2.insertBefore(elm1, next2);
}
This is just the skeleton. Nice question, so I am working on this.