check multiple checkbox from first click to second click using jquery - javascript

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.

Related

How to display data from database into a checkbox?

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>

How to set checked radio button using name and attr in jquery?

I am working with some radio input and want to set them checked while edit function. I used ajax response. I have to set them checked.
The code sample is following:
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" />
Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" />
Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
I get from ajax response the following:
var ans_name = ans1,ans2,ans3;
var str = ans_c,ans_a,ans_d;
That means i have to set checked the 3rd radio input of gruop 1 and so on.
How can i set checked the corresponding radio button by jquery?
Select based on attribute equals selector and update the checked property.
var ans_name = 'ans1,ans2,ans3';
var str = 'ans_c,ans_a,ans_d';
// split the string into array by ,
var names = ans_name.split(','),
val = str.split(',');
// iterate over names array
names.forEach(function(v, i) {
// generate the selector and get jQuery object using that
$('[name="' + v + '"][str="' + val[i] + '"]')
// update the property
.prop('checked', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" /> Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" /> Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
Or generate a single selector using Array#map and Array#join methods.
var ans_name = 'ans1,ans2,ans3';
var str = 'ans_c,ans_a,ans_d';
var names = ans_name.split(','),
val = str.split(',');
$(names.map(function(v, i) {
// geneate the selector
return '[name="' + v + '"][str="' + val[i] + '"]';
})
// join the selectors
.join(','))
// update the property
.prop('checked', true)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" /> Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" /> Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
Explode names and value with data what you get from response and check through loop and you will get radio checked with the correct answer.
var ans_name = "ans1,ans2,ans3";
var str = "ans_c,ans_a,ans_d";
var checkbox_names = ans_name.split(",");
var values = str.split(",");
$(checkbox_names).each(function(index, value){
$("[name='"+value+"'][str='"+values[index]+"']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" />
Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" />
Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />

HTML Radio Button Customization with jQuery

<input type="radio" name="tshirt" value="1" ><label>T-Shirt-1</label><br>
<input type="radio" name="tshirt" value="2" ><label>T-Shirt-2</label><br>
<input type="radio" name="tshirt" value="3" ><label>T-Shirt-3</label><br>
<input type="radio" name="tshirt" value="4" ><label>No T-Shirt</label><br><br>
<input type="radio" name="shirt" value="1" ><label>Shirt-1</label><br>
<input type="radio" name="shirt" value="2" ><label>Shirt-2</label><br>
<input type="radio" name="shirt" value="3" ><label>No Shirt</label><br><br>
<hr>
<br>
<input type="radio" name="shorts" value="1" ><label>Shorts-1</label><br>
<input type="radio" name="shorts" value="2" ><label>Shorts-2</label><br>
<input type="radio" name="shorts" value="3" ><label>Shorts-3</label><br>
<input type="radio" name="shorts" value="4" ><label>Shorts-4</label><br>
<input type="radio" name="shorts" value="5" ><label>No Shorts</label><br><br>
<input type="radio" name="pants" value="1" ><label>Pants-1</label><br>
<input type="radio" name="pants" value="2" ><label>Pants-2</label><br>
<input type="radio" name="pants" value="3" ><label>No Pants</label><br><br>
So you are to chose T-shirt + Shirt and then Shorts + Pants on this sample store.
I want to make it so the customer has to pick at least a T-Shirt OR a Shirt AND at least a pair of Shorts OR Pants.
At least one item above the horizontal line and at least one item below the horizontal line has to be picked.
I am guessing I have to use jQuery to force this?
You can perform a check when a submission happens. Here I have used a submit button and validate the inputs upon clicking it. Also I have changed the name attributes of the NO options so that those options won't affect the selection.
var tshirtSelected = false;
var shirtSelected = false;
var shortSelected = false;
var pantSelected = false;
$("#myBtn").click(function() {
$("input[name='tshirt']").each(function(i, obj) {
if ($(this).is(':checked')) {
tshirtSelected = true;
}
});
if (!tshirtSelected) {
$("input[name='shirt']").each(function(i, obj) {
if ($(this).is(':checked')) {
shirtSelected = true;
}
});
}
if (!(shirtSelected || tshirtSelected)) {
alert("Please select a tshirt or a shirt!!!!");
}
$("input[name='shorts']").each(function(i, obj) {
if ($(this).is(':checked')) {
shortSelected = true;
}
});
if (!shortSelected) {
$("input[name='pants']").each(function(i, obj) {
if ($(this).is(':checked')) {
pantSelected = true;
}
});
}
if (!(shortSelected || pantSelected)) {
alert("Please select a short or a pant!!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="radio" name="tshirt" value="1">
<label>T-Shirt-1</label>
<br>
<input type="radio" name="tshirt" value="2">
<label>T-Shirt-2</label>
<br>
<input type="radio" name="tshirt" value="3">
<label>T-Shirt-3</label>
<br>
<input type="radio" name="no-tshirt" value="4">
<label>No T-Shirt</label>
<br>
<br>
<input type="radio" name="shirt" value="1">
<label>Shirt-1</label>
<br>
<input type="radio" name="shirt" value="2">
<label>Shirt-2</label>
<br>
<input type="radio" name="no-shirt" value="3">
<label>No Shirt</label>
<br>
<br>
<hr>
<br>
<input type="radio" name="shorts" value="1">
<label>Shorts-1</label>
<br>
<input type="radio" name="shorts" value="2">
<label>Shorts-2</label>
<br>
<input type="radio" name="shorts" value="3">
<label>Shorts-3</label>
<br>
<input type="radio" name="shorts" value="4">
<label>Shorts-4</label>
<br>
<input type="radio" name="no-shorts" value="5">
<label>No Shorts</label>
<br>
<br>
<input type="radio" name="pants" value="1">
<label>Pants-1</label>
<br>
<input type="radio" name="pants" value="2">
<label>Pants-2</label>
<br>
<input type="radio" name="no-pants" value="3">
<label>No Pants</label>
<br>
<br>
<button id="myBtn">OK</button>

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);

How to remove unchecked item from textbox?

My JavaScript:
<script type="text/javascript">
function getVal(chk, adto)
{
var ad="";
if (chk.checked)
{
ad=document.getElementById(adto).value + chk.value;
document.getElementById(adto).value = ad;
}
else
{
}
}
</script>
The first block is working as I wanted but when user unchecked the check box it should remove the value from the text box.
Below is the HTML code:
<body>
<input type="checkbox" name="chk[]" value="0" id="chk0" onclick="getVal(this, 'inp0')">value 0<br>
<input type="checkbox" name="chk[]" value="1" id="chk1" onclick="getVal(this, 'inp0')">value 1<br>
<input type="checkbox" name="chk[]" value="2" id="chk2" onclick="getVal(this, 'inp0')">value 2<br>
<input type="checkbox" name="chk[]" value="3" id="chk3" onclick="getVal(this, 'inp0')">value 3<br>
<input type="checkbox" name="chk[]" value="4" id="chk4" onclick="getVal(this, 'inp0')">value 4<br>
<input type="checkbox" name="chk[]" value="5" id="chk5" onclick="getVal(this, 'inp0')">value 5<br>
<br>
<input type="text" name="inp" id="inp0" readonly><br>
Please help how to remove the unchecked options from the text box.
DEMO
Assuming all checkboxes with the same name adds to the same field.
If not we will need more code.
I also assumed the boxes are wrapped in a form tag
function getVal(chk, adto) {
var ad=[];
var checks = chk.form[chk.name];
for (i=0;i<checks.length;i++) {
if (checks[i].checked) {
ad.push(checks[i].value);
}
}
document.getElementById(adto).value = (ad.length>0)?ad.join(" "):"";
}

Categories

Resources