I am implementing Multiple select with checkboxes and jQuery as described at http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery
This is the example shown in the website:
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
The dropdown list with checkboxes is showing as expected. Please note that there are three such lists being displayed on one page. How to identify them individually?
The question is how do I determine using javascript which of the checkboxes under each of the lists have been selected. I also need to obtain the value of the selected item. Which of these have to tagged with an id?
$('input[type="checkbox"]').on('change',function(){
$(this).closest('.multiselect').find('span').empty();
$(this).closest('.multiselect').find('input[type="checkbox"]:checked').each(function(){
$(this).closest('.multiselect').find('span').append($(this).val()+' | ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
you can try this below, it will display the value of each checkbox who is checked
function check(){
var e = document.getElementsByClassName('check-box');
var total = e.length;
for (var i=0; i<total; i++){
if (total[i].checked){ alert(total[i].value); }
// or alert(i); if you just need the index
}
}
Here is an example which may help you:
$(':checkbox').change(function(){
var liste2 = $(':checkbox:checked').map(function() {
return this.value;
}).get();
$('span').text(liste2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
Related
I'm a student and I'm going to make a page about the exam.
I'd like to divide several checkboxes so they don't overlap and total sum.
How can I have "q1" and "q2" operate separately?
Only one is checked per question, and whether two are sum together.
<script type="text/javascript">
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk){
var obj = document.getElementsByName("q1");
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
</script>
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
Update your checkOnly function to add name as arg:
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
In the HTML update the method, pass name as second arg:
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this, 'q2')" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="2"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="3"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="4"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="2"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="3"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="4"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
I need to get all selected checkboxes with a custom data attribute.
<input type="checkbox" class="check" data-name="id" value="5">
$("input[data-name='id']:selected") and $("input:selected[data-name='id']")
don't work.
Checkboxes and radio get checked not selected. Below will create an array of all the checked checkboxes.
var arry = [];
$("input[data-name='id']:checked").each(function(){
arry.push(this.value);
});
console.log(arry);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input checked type="checkbox" class="check" data-name="id" value="5">
<input checked type="checkbox" class="check" data-name="id" value="3">
The below should select based on the data-name attribute combined with :checked selector
console.log($('[data-name=id]:checked'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check" data-name="id" value="5">
<input type="checkbox" class="check" data-name="id" value="6" checked>
<input type="checkbox" class="check" data-name="id" value="7">
<input type="checkbox" class="check" data-name="id" value="8" checked>
<input type="checkbox" class="check" data-name="id" value="9" checked>
I need to calculate the value total, which is a product of initial value (let's say 10) and the factors A, B, C and D, which are equal to, let's say 2, 3, 4 and 5.
The combination of factors should be selected by user via checking the corresponding boxes. The problem is that I need to repeat this many times independently in a form and the solution below (for two of these sections) does not separate this process correctly. If these were text values, I would do e.g. var $text = $(".result", $section);
Basically, I do not understand how to relate numerical variable to these sections. Also, it would be great to have this initial value (10) in the Result field even if none of the boxes are checked.
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
var total = 10;
$(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$('.result').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
I assume that you want the rows to be independent:
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section"),
initial = parseInt($section.find('.result').data('initial')),
total = initial;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total === initial ? initial : total);
});
// getting the total values
$(".res_button").click(function() {
var $section = $(this).closest(".section");
var total = $section.find('.result').val();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="10" value="10" class="result"></label>
<label><button class="res_button">Result 1 line</button></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="20" value="20" class="result"></label>
<label><button class="res_button">Result 2 line</button></label>
</div>
$(document).ready(function() {
$(".factor-checkbox").click(function() {
var $section= $(this).closest(".section")
var total = 10;
$section.find(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find(".result").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
I want to set array vlaues as checked in checkbox using jquery
I have three values in one array and want to set as checked value of checkbox.
Here you go with the solution https://jsfiddle.net/41etxeyy/1/
var arr = [2,5,6];
for(var i=0; i<arr.length; i++){
$('input[type="checkbox"][value="' + arr[i] +'"]').prop('checked', 'checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="1" />1 <br/>
<input type="checkbox" name="checkbox" value="2" />2 <br/>
<input type="checkbox" name="checkbox" value="3" />3 <br/>
<input type="checkbox" name="checkbox" value="4" />4 <br/>
<input type="checkbox" name="checkbox" value="5" />5 <br/>
<input type="checkbox" name="checkbox" value="6" />6 <br/>
<input type="checkbox" name="checkbox" value="7" />7 <br/>
I guess this is what you are looking for.
I have the following HTML structure:
<div>
<span class="city-search-text">Choose City</span>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
If any checkbox is selected, span with class city-search-text should be replace with:
<a class="cancel-all" href="#">Cancel all</a>
When i uncheck all check boxes, link with class cancel-all should be replaced with span with class city-search-text.
I have this jquery code. It replaces the span when i check some box, but doesn't replace it back when i uncheck all checkboxes.
var Checkboxes = $('.multiselect').find(':checkbox');
var CitySearch = '<span class="city-search-text">Choose City</span>';
var InactiveText = $('.city-search-text');
var CancellAll = '<a class="cancel-all" href="#">Cancell All</a>';
var ActiveText = $('.cancel-all');
Checkboxes.click(function(){
if(Checkboxes.is(':checked')){
InactiveText.replaceWith(CancellAll);
}
else{
ActiveText.replaceWith(CitySearch);
}
});
jQuery is not live on the DOM all the time. You'll have to explicitly look for the element each time you want to replace. So do not use the variables ActiveText & InactiveText, instead use $(".cancel-all").replaceWith(CitySearch) and $(".city-search-text").replaceWith(CancelAll)
You shouldn't replace your content all the time. Just show and hide your elements when needed:
$(function(){
var Checkboxes = $('.multiselect input[type=checkbox]');
var CitySearch = $('.city-search-text');
var CancelAll = $('.cancel-all');
CitySearch.show();
CancelAll.hide();
Checkboxes.click(function(){
if(Checkboxes.is(':checked')){
CitySearch.hide();
CancelAll.show();
}
else{
CitySearch.show();
CancelAll.hide();
}
});
});
Fiddle
Try this:
JavaScript:
var checkbox = $('.multiselect').find(':checkbox');
var choose = $('.city-search-text');
var cancel = $('.cancel-all');
checkbox.click(function(){
if(checkbox.is(':checked')){
cancel.show();
choose.hide();
}
else {
cancel.hide();
choose.show();
}
});
HTML:
<div>
<span class="city-search-text">Choose City</span>
<a class="cancel-all" href="#">Cancel all</a>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
Fiddle: http://jsfiddle.net/aSa3T/
Instead of replacing the html. You can show and hide the options you want.
html
<div>
<span class="city-search-text">Choose City</span>
<a style="display:none" class="cancel-all" href="#">Cancell All</a>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />1</label>
<label><input type="checkbox" name="option[]" value="2" />2</label>
<label><input type="checkbox" name="option[]" value="3" />3</label>
<label><input type="checkbox" name="option[]" value="4" />4</label>
</div>
js
$(".multiselect :checkbox").click(function()
{
if($(".multiselect :checked").length > 0)
{
$(".city-search-text").hide();
$(".cancel-all").show();
}
else
{
$(".city-search-text").show();
$(".cancel-all").hide();
}
});