How to display data from database into a checkbox? - javascript

guy's i am trying to make my database showing into my checkbox (multi select).
but i dont know how.
i tried to make a code but it didn't work. here is my code.
i hope someone can help me with this and give me an example for the jquery code
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/absen_karyawan_autocomplete.php",
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
$("#multiselect").append($("<label>").text((list[i]['nama'])).prepend(
$("<input>").attr('type', 'checkbox').val((list[i]['nama'])).prop('checked', true)
));
}
return false;
}
});
});
.multiselect {
width:20em;
height:10em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<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" />I want put my database data here </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>
<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>
<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>
<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>
</div>
I have try to make an example for what i need
i just use one json data.
i hope someone can help me to change my code to server side .
i have made the code for server side like the 1st question but i am fail and the data not displaying at my page
var json = [
{
name: "I want to displaying my database data like this",
id: "27",
checked: "true"
}
];
$.each(json, function () {
$("#multiselect").append($("<label>").text(this.name).prepend(
$("<input>").attr('type', 'checkbox').val(this.id)
.prop('checked', this.checked)
));
});
$("#multiselect").on('change', '[type=checkbox]', function () {
console.log($(this).val());
});
.multiselect {
width:20em;
height:10em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="multiselect"></div>

Related

check multiple checkbox from first click to second click using jquery

Sorry for my english.
I have several checkboxes like these:
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
If I check the checkbox number two and the checkbox number seven, it is possible to automatically check with JQUERY the checkboxes from the number two and the number seven?
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" checked />2
<input type="checkbox" name="data[]" value="3" checked />3
<input type="checkbox" name="data[]" value="4" checked />4
<input type="checkbox" name="data[]" value="5" checked />5
<input type="checkbox" name="data[]" value="6" checked />6
<input type="checkbox" name="data[]" value="7" checked />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
Thanks!
You can use pseudo selectors first and lastand loop between then
$('[type="checkbox"]:checkbox').change(function() {
var first = $('[type="checkbox"]:checked:first').val();
var last = $('[type="checkbox"]:checked:last').val();
for(var i = first; i <= last; i++){
$('[type="checkbox"][value="'+i+'"]').prop( "checked", true );
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
This is how I could acheive that:
var checked = [];
$(":checkbox").click(function() {
if (!$(this).is(':checked')) {
// Optional sanity
// if you wish to make user available to uncheck
return;
}
var min = $(':checkbox:checked:first').val();
var max = $(':checkbox:checked:last').val();
for (var index = Number(min)+1; index < Number(max); index++) {
$(`[type="checkbox"][value='${index}']`).prop("checked", true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
Perfectly possible. You could do something like this (it'll require you to add an id to your inputs. I'll use myCheck):
let first = null;
function clicked(event) {
if(first) {
let second = parseInt(event.target.value, 10);
let a = first < second ? first : second;
let b = first < second ? second : first;
for(let i = a; i <= b; i++) {
$('#myCheck[value="' + i + '"]').attr('checked', true);
}
first = null;
}
else {
first = parseInt(event.target.value, 10);
}
}
Then, just use clicked on your click event. Check it out: https://jsfiddle.net/7pf45mbz/1/
In some cases, you might have to use prop instead of attr. However, for your use case it would probably be better user experience if you used a select element with multiple instead of checkboxes.

Adding form field values together into hidden field on form submit (js or jquery)

this seems super simple to me, but I just can't figure it out today.
I've developed a basic quiz, and want to add the answers of the quiz together to create a "score". Based on the score I'll return different results on the confirmation page.
Here's a basic example of the form:
<form id="quiz" method="post" name="quiz" action="url">
<label for="field1">Question 1</label>
<label><input name="question1" value="1" type="radio">Answer 1</label>
<label><input name="question1" value="4" type="radio">Answer 2</label>
<label><input name="question1" value="9" type="radio">Answer 3</label>
<label for="field2">Question 2</label>
<label><input name="question2" value="1" type="radio">Answer 1</label>
<label><input name="question2" value="4" type="radio">Answer 2</label>
<label><input name="question2" value="9" type="radio">Answer 3</label>
<label for="field3">Question 3</label>
<label><input name="question3" value="1" type="radio">Answer 1</label>
<label><input name="question3" value="4" type="radio">Answer 2</label>
<label><input name="question3" value="9" type="radio">Answer 3</label>
<input value="See your Results" type="submit">
</form>
I tried building out some javascript to add these values together, but it wasn't even beginning to work - here's my attempt in case you're curious:
function generateScore(){
var maturityScore = document.forms[0].question1.value + document.forms[0].question2.value + document.forms[0].question1.value;
document.forms[0].maturityLevel.value = maturityScore;
}
document.forms[0].addEventListener('submit') = generateScore
Can anyone point me in the right direction? Happy to use javascript or jquery to do this. Note that I can't edit the form html - it's being generated by the MAP I'm using (and is way ugly - the version I posted above is simplified for readability).
Thank you!
Following code will be helpful to you,
$('#quiz').on('submit',function(){
var score = parseInt($('input[name=question1]:checked').val())+
parseInt($('input[name=question2]:checked').val())+
parseInt($('input[name=question3]:checked').val());
alert('submit'+score);
//score can be assigned to any field you need
//$('#maturityLevel').val(score);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="quiz" method="post" name="quiz" action="url">
<label for="field1">Question 1</label>
<label><input name="question1" value="1" type="radio">Answer 1</label>
<label><input name="question1" value="4" type="radio">Answer 2</label>
<label><input name="question1" value="9" type="radio">Answer 3</label>
<label for="field2">Question 2</label>
<label><input name="question2" value="1" type="radio">Answer 1</label>
<label><input name="question2" value="4" type="radio">Answer 2</label>
<label><input name="question2" value="9" type="radio">Answer 3</label>
<label for="field3">Question 3</label>
<label><input name="question3" value="1" type="radio">Answer 1</label>
<label><input name="question3" value="4" type="radio">Answer 2</label>
<label><input name="question3" value="9" type="radio">Answer 3</label>
<input value="See your Results" type="submit">
</form>
Make sure to answer all the 3 question. Otherwise you have to do the proper validations before parsing using parseInt.

checkbox list with divs, how to color rows and select all

Newbie and first question so be gentle!
I found http://jsfiddle.net/MJVKB/169/ from a previous question which works great. I'm trying to find a way to add a 'select all / deselect all checkbox'. I can get the multiple selection to work, but can't get all the colors to highlight.
Can someone help me add the correct code to do this?
Any help really appreciated. Thanks
jQuery.fn.multiselect = function() {
$(this).each(function() {
var checkboxes = $(this).find("input:checkbox");
checkboxes.each(function() {
var checkbox = $(this);
// Highlight pre-selected checkboxes
if (checkbox.attr("checked"))
checkbox.parent().addClass("multiselect-on");
// Highlight checkboxes that the user selects
checkbox.click(function() {
if (checkbox.attr("checked"))
checkbox.parent().addClass("multiselect-on");
else
checkbox.parent().removeClass("multiselect-on");
alert($("option:selected"));
});
});
});
};
$(function() {
$(".multiselect").multiselect();
});
.multiselect {
width:20em;
height:15em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:white;
background-color:red;
}
<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="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
Try using .prop() and .change() methods instead
.prop() documentation
jQuery.fn.multiselect = function() {
$(this).each(function() {
var checkboxes = $(this).find("input:checkbox");
checkboxes.each(function() {
var checkbox = $(this);
// Highlight pre-selected checkboxes
if (checkbox.prop("checked"))
checkbox.parent().addClass("multiselect-on");
// Highlight checkboxes that the user selects
checkbox.change(function() {
if (checkbox.prop("checked"))
checkbox.parent().addClass("multiselect-on");
else
checkbox.parent().removeClass("multiselect-on");
// alert($("option:selected"));
});
});
});
};
$(function() {
$(".multiselect").multiselect();
// Select all
$('[name="all"]').change(function(){
$('.multiselect').find("input:checkbox").prop('checked', $(this).prop('checked')).change();
});
});
.multiselect {
width:20em;
height:15em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<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>
</div>
<label><input type="checkbox" name="all" value="1" />Select All</label>

multiple checkbox div 100% height of body

I have problem to fix height of div that have multiple checkboxes inside, so the height dont be more then 100% of window (body). I try so many staff so im out of solutions. If someone know some tricks to help me with this one, i will be so much pleased
$(".open").on("click", function () {
$("#multiselect-wrap").animate({
left: 0
});
$(".open").hide();
$(".close").show();
});
$(".close").on("click", function () {
$("#multiselect-wrap").animate({
left: -220
});
$(".open").show();
$(".close").hide();
});
#multiselect-wrap {
background-color: #f6f6f6;
width: 200px;
padding: 0 8px 10px 10px;
border: solid 1px #c0c0c0;
position: fixed;
height: 100%;
}
.multiselect {
width: 200px;
height: 100%;
overflow:auto;
border: solid 1px #c0c0c0;
background-color: #fff;
}
.multiselect label {
display:block;
cursor: pointer;
padding: 4px 10px;
}
.multiselect input {
float: right;
cursor: pointer;
}
.multiselect p {
padding-left: 5px;
}
.open, .close {
padding: 10px;
position: absolute;
right: -81px;
width: 100px;
top: 40px;
background-color: #f6f6f6;
border: 1px solid #c0c0c0;
border-top-color: #f6f6f6;
transform: rotate(-90deg);
cursor: pointer;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiselect-wrap">
<p>Select Criteria(s)</p>
<div class="open">Show Options</div>
<div class="close">Hide Options</div>
<div class="multiselect">
<div class="content">
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
<p>Heading</p>
<label>Green
<input type="checkbox" name="option[]" value="1" />
</label>
<label>Red
<input type="checkbox" name="option[]" value="2" />
</label>
<label>Blue
<input type="checkbox" name="option[]" value="3" />
</label>
<label>Orange
<input type="checkbox" name="option[]" value="4" />
</label>
<label>Purple
<input type="checkbox" name="option[]" value="5" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="6" />
</label>
<label>White
<input type="checkbox" name="option[]" value="7" />
</label>
<label>Black
<input type="checkbox" name="option[]" value="8" />
</label>
<label>White
<input type="checkbox" name="option[]" value="9" />
</label>
</div>
</div>
</div>
According to me you have to subtract the height of above p tag("Select Criteria(s)") from the height of div that have multiple checkboxes inside. You can achieve this by jquery. I have done small modification in code here
$(".open").on( "click", function() {
$("#multiselect-wrap").animate({left:0});
$(".open").hide();
$(".close").show();
});
$(".close").on( "click", function() {
$("#multiselect-wrap").animate({left: -220});
$(".open").show();
$(".close").hide();
});
var getMultiSelectHeight = $(".multiselect").height();
$(".multiselect").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+20))
There is one solution with CSS. See demo here.
I add below for setting the default html viewport margin 0:
html, body{
margin: 0 auto;
}
and updated .multiselect with CSS3 to calculate the height:
height: calc(100% - 50px); // 50px is <p>'s height including margin
Try to resize the screen in the demo, you will see the height will change dynamically.

How do I set a group of checkboxes using values?

So I have a group of checkboxes, for example:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Now I have an array of values:
var values = ["2", "4", "7", "8"];
Now how do I end up with my group of checkboxes to look like this:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" />
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" />
Will I have to use two for-loops to do this? Is there a way in plain javascript or jquery that doesn't involve having to loop twice?
API docs demo
var values = ["2", "4", "7", "8"];
$('input[name="cbl"]').val(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Create a selector from the array, and check them all
$( '#cbl' + values.join(', #cbl') ).prop('checked', true);
FIDDLE
This is using the ID's, as that's a better way to select the elements than the values, if you still want to use the values, you can use the same concept
$( '[value="' + values.join('"], [value="') + '"]').prop('checked', true);
FIDDLE
or you can filter
$('input[type="checkbox"]').filter(function() {
return $.inArray(this.value, values) != -1;
}).prop('checked', true);

Categories

Resources