I have this problem..
I have this HTML code for 2 groups of checkbox:
<label class="checkbox"><input type="checkbox" onClick="toggle_colors(this)" checked><i></i>All Colors</label>
<label class="checkbox"><input type="checkbox" name="colore" checked><i></i>red</label>
<label class="checkbox"><input type="checkbox" name="colore" checked><i></i>yellow</label>
<label class="checkbox"><input type="checkbox" onClick="toggle_brands(this)" checked><i></i>Tutte le Marche</label>
<label class="checkbox"><input type="checkbox" name="brand" checked><i></i>Acer</label>
<label class="checkbox"><input type="checkbox" name="brand" checked><i></i>Asus</label>
And I use this javascripts for select all/toggle all:
function toggle_brands(source) {
checkboxes = document.getElementsByName('brand');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
function toggle_colors(source) {
checkboxes = document.getElementsByName('colore');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
When the user click on the checkbox I need to know if the checkbox is selected or not, to send the details of the query by AJAX..
To know if the checkbox I use this javascript:
$( "[type=checkbox]" ).change(function() {
if(this.checked) {
alert('checked');
}
else {
alert('unchecked');
}
});
I want the text at the right of the selected checkbox..!
Ok.. With the parent work fine!
I have added this code to create the query:
function create_query(){
var query = "SELECT * FROM computers ORDER BY " + ($("#ordine option:selected").val()) + " LIMIT " + ($("#risultati option:selected").val());
$.ajax({
type: "POST",
url: "static/cerca_prodotti.php",
data: "query="+query,
dataType: "html",
success: function(risposta){
$("div#risultati").html(risposta);
},
})
}
$( "[type=checkbox]" ).change(function() {
if(this.checked) {}
else {}
});
$("#ordine").change(function() {
create_query();
});
But I need to modify the query when the checkbox was checked/unchecked!
When you change the checked property programatically, the change event will not get triggered, you need to trigger the event manually.
$('input[data-all-type]').change(function() {
$('input[name="' + $(this).data('allType') + '"]')[this.checked ? 'not' : 'filter'](':checked').prop('checked', this.checked).change();
})
$("input[type=checkbox]:not([data-all-type])").change(function() {
if (this.checked) {
console.log('checked', this);
} else {
console.log('unchecked', this);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox">
<input type="checkbox" name="color-all" data-all-type="colore"><i></i>All Colors</label>
<label class="checkbox">
<input type="checkbox" name="colore"><i></i>red</label>
<label class="checkbox">
<input type="checkbox" name="colore"><i></i>yellow</label>
<label class="checkbox">
<input type="checkbox" name="brand-all" data-all-type="brand"><i></i>Tutte le Marche</label>
<label class="checkbox">
<input type="checkbox" name="brand"><i></i>Acer</label>
<label class="checkbox">
<input type="checkbox" name="brand"><i></i>Asus</label>
You can do that with only one function
function toggle_checkbox(source, things) {
$('input[name="' + things + '"]').prop('checked', $(source).is(':checked'))
//OR
$('input[name="' + things + '"]').prop('checked', source.checked);
}
function toggle_checkbox(source, things) {
$('input[name="' + things + '"]').prop('checked', source.checked);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox">
<input type="checkbox" onClick="toggle_checkbox(this,'colore')" checked><i></i>All Colors</label>
<label class="checkbox">
<input type="checkbox" name="colore" checked><i></i>red</label>
<label class="checkbox">
<input type="checkbox" name="colore" checked><i></i>yellow</label>
<label class="checkbox">
<input type="checkbox" onClick="toggle_checkbox(this,'brand')" checked><i></i>Tutte le Marche</label>
<label class="checkbox">
<input type="checkbox" name="brand" checked><i></i>Acer</label>
<label class="checkbox">
<input type="checkbox" name="brand" checked><i></i>Asus</label>
You can get text of the parent node of the checkbox in this way:
$( "[type=checkbox]" ).change(function() {
var text = this.parentElement.innerText;
if(this.checked) {
alert(text + ': checked');
}
else {
alert(text + ': unchecked');
}
});
Related
In a div, I have a 'select all' checkbox. When this checkbox is checked, all the other checkboxes will automatically checked. I want to assign their values as a class name. I am able to achieve this when a single checkbox is checked. But now I want this should work when all checkbox is checked at once when a select-all checkbox is checked.
$('.select-all').on('click', function() {
let isSelected = $(this).is(':checked');
$(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
if (isSelected) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
})
});
$('input:checkbox').not('.select-all').change(function() {
var cl = $(this).val();
var cls = 'abc' + '' + cl + '';
if ($(this).is(':checked')) {
$(this).addClass(cls);
} else {
$(this).removeClass(cls);
}
})
<div class="checkbox-list">
<label><input type="checkbox" class="select-all" name="">All</label>
<label><input type="checkbox" name="" value="1">One</label>
<label><input type="checkbox" name="" value="2">Two</label>
<label><input type="checkbox" name="" value="3">Three</label>
<label><input type="checkbox" name="" value="4">Four</label>
<label><input type="checkbox" name="" value="5">Five</label>
<label><input type="checkbox" name="" value="6">Six</label>
<label><input type="checkbox" name="" value="6">Three</label>
<label><input type="checkbox" name="" value="7">Four</label>
<label><input type="checkbox" name="" value="8">Five</label>
<label><input type="checkbox" name="" value="9">Six</label>
</div>
You pretty much wrote the code already to achieve this,
What i did here is adding the cl = $(this).val(); and cls = 'abc' + '' + cl + ''; in the each loop and add the class when isSelected is true, and delete when false.
$('.select-all').on('click', function() {
let isSelected = $(this).is(':checked');
$(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
let cl = $(this).val();
let cls = 'abc' + '' + cl + '';
if (isSelected) {
$(this).prop('checked', true);
$(this).addClass(cls);
} else {
$(this).prop('checked', false);
$(this).removeClass(cls);
}
})
});
$('input:checkbox').not('.select-all').change(function() {
let cl = $(this).val();
let cls = 'abc' + '' + cl + '';
if ($(this).is(':checked')) {
$(this).addClass(cls);
} else {
$(this).removeClass(cls);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-list">
<label><input type="checkbox" class="select-all" name="">All</label>
<label><input type="checkbox" name="" value="1">One</label>
<label><input type="checkbox" name="" value="2">Two</label>
<label><input type="checkbox" name="" value="3">Three</label>
<label><input type="checkbox" name="" value="4">Four</label>
<label><input type="checkbox" name="" value="5">Five</label>
<label><input type="checkbox" name="" value="6">Six</label>
<label><input type="checkbox" name="" value="6">Three</label>
<label><input type="checkbox" name="" value="7">Four</label>
<label><input type="checkbox" name="" value="8">Five</label>
<label><input type="checkbox" name="" value="9">Six</label>
</div>
I have the following HTML code:
<label class="radio">
<input type="radio" name="msgTo" value="optiona" checked="checked">
<i></i>Option A</label>
<label class="radio">
<input type="radio" name="msgTo" value="optionb">
<i></i>Option B</label>
<label class="radio">
<input type="radio" name="msgTo" value="optionc">
<i></i>Option C</label>
<label class="radio">
<input type="radio" name="msgTo" value="optiond">
<i></i>Option D</label>
<label class="radio">
<input type="radio" name="msgTo" value="optione">
<i></i>Option E</label>
and I'm trying to do stuff depending on which option is checked with this code:
$('input[name="msgTo"]:checked').on('change', function() {
alert('option changed');
if ($('input[name="msgTo"]:checked').val() == 'optionc') {
$('#outsideMsgWarning').show();
$('#destEspecificos').hide();
$('#locEspecificas').hide();
} else if ($('input[name="msgTo"]:checked').val() == 'optiond') {
$('#outsideMsgWarning').show();
$('#destEspecificos').hide();
$('#locEspecificas').show();
$('.my_select_box').trigger('chosen:updated');
} else if ($('input[name="msgTo"]:checked').val() == 'optione') {
$('#outsideMsgWarning').show();
$('#destEspecificos').hide();
$('#locEspecificas').hide();
} else if ($('input[name="msgTo"]:checked').val() == 'optionb') {
$('#outsideMsgWarning').hide();
$('#destEspecificos').show();
$('#locEspecificas').hide();
$('.my_select_box').trigger('chosen:updated');
} else {
$('#outsideMsgWarning').hide();
$('#destEspecificos').hide();
$('#locEspecificas').hide();
$('.my_select_box').trigger('chosen:updated');
}
});
When I select the 2nd, 3rd, 4th or 5th option, nothing happens (should hide/show some options) but when I go back to the first one (which would be the ELSE in javascript), the alert is shown. The alert is just for testing purposes.
I've also tried adding brackets [] to the checkboxes names but got the same result.
Why doesn't javascript detect every change?
Thanks in advance!!!
Your initial selector that sets up the event binding is looking only for radio buttons that are checked:
$('input[name="msgTo"]:checked').on('change', function() {
Since the first radio button is pre-checked by default, only that one will be affected.
Change the line to:
$('input[name="msgTo"]').on('change', function() {
So that all radio buttons in the group get bound to the event handler.
Change the onchange event like this $('input[name="msgTo"]').on('change', function() .you should remove the :checked
$('input[name="msgTo"]').on('change', function() {
if($(this).is(':checked')){
alert('option changed');
}
if ($('input[name="msgTo"]:checked').val() == 'optionc') {
$('#outsideMsgWarning').show();
$('#destEspecificos').hide();
$('#locEspecificas').hide();
} else if ($('input[name="msgTo"]:checked').val() == 'optiond') {
$('#outsideMsgWarning').show();
$('#destEspecificos').hide();
$('#locEspecificas').show();
$('.my_select_box').trigger('chosen:updated');
} else if ($('input[name="msgTo"]:checked').val() == 'optione') {
$('#outsideMsgWarning').show();
$('#destEspecificos').hide();
$('#locEspecificas').hide();
} else if ($('input[name="msgTo"]:checked').val() == 'optionb') {
$('#outsideMsgWarning').hide();
$('#destEspecificos').show();
$('#locEspecificas').hide();
$('.my_select_box').trigger('chosen:updated');
} else {
$('#outsideMsgWarning').hide();
$('#destEspecificos').hide();
$('#locEspecificas').hide();
$('.my_select_box').trigger('chosen:updated');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio">
<input type="radio" name="msgTo" value="optiona" checked="checked">
<i></i>Option A</label>
<label class="radio">
<input type="radio" name="msgTo" value="optionb">
<i></i>Option B</label>
<label class="radio">
<input type="radio" name="msgTo" value="optionc">
<i></i>Option C</label>
<label class="radio">
<input type="radio" name="msgTo" value="optiond">
<i></i>Option D</label>
<label class="radio">
<input type="radio" name="msgTo" value="optione">
<i></i>Option E</label>
You are selecting the checked input.
$('input[name="msgTo"]:checked')
Try this selector instead:
$('input[name="msgTo"]')
the following is my code
<input type="checkbox" id="checkbox" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>
my javascript/jquery script is
<script>
$(document).ready(function() {
var ckbox = $('#checkbox');
var url = '';
console.log(url);
$('input').on('click', function() {
if(ckbox.is(':checked')) {
var url = $(':checked').val();
console.log(url);
window.location = url;
}
});
});
I want the page to go to the newly checked checkbox.How to make that happen?
id should be a unique value in the whole document. Change your HTML to have unique id's for each checkbox and modify your jQuery selector based on class or input type.
Check below example.
$(document).ready(function() {
$('.chkbox').on('change', function() {
if ($(this).is(':checked')) {
var url = $(this).val();
console.log(url);
window.location = url;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" class="chkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" id="checkbox2" class="chkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox3" class="chkbox" value="brand.php?brand=farari" name="farari" checked> Farari</li>
<input type="checkbox" id="checkbox4" class="chkbox" value="brand.php?brand=nissan" name="nissan" checked> Nissan</li>
$(document).ready(function() {
var ckbox = $('.clscheckboxes');
var url = '';
$('input[type=checkbox]').change(function() {
if ($(this).is(':checked')) {
var url = $(this).val();
console.log(url);
alert(url);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" class="clscheckboxes" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox2" class="clscheckboxes" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox3" class="clscheckboxes" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox4" class="clscheckboxes" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>
One more sample code. Hope it'll work.
JQuery Code
$( ".checkbox" ).click(function() {
if ($(this).is(":checked"))
{
var page_url = $(this).val();
window.location = page_url;
}
});
HTML
<input type="checkbox" class="checkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=farari" name="farari"> Farari</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=nissan" name="nissan"> Nissan</li>
Why doesn't this "All / none" option do his job? I can't see why .attr('checked', status); doesn't toggle all the checkboxes.
And what's the most clever way to hide / show elements of #main belonging to selected categories?
$('input[name="all"]').click(function() {
var status = $(this).is(':checked');
alert(status);
$('input[type="checkbox"]').attr('checked', status);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="cat1">Element of category1</div>
<div class="cat4">Element of category4</div>
<div class="cat3">Element of category3</div>
<div class="cat1">Element of category1</div>
<div class="cat2">Element of category2</div>
</div>
<label>
<input type="checkbox" name="all" checked="true">
All / none
</label>
<label>
<input type="checkbox" name="cat1" checked="true">
A
</label>
<label>
<input type="checkbox" name="cat2">
B
</label>
<label>
<input type="checkbox" name="cat3">
C
</label>
<label>
<input type="checkbox" name="cat4">
D
</label>
Use .prop() not .attr()
See http://api.jquery.com/prop/
$('input[name="all"]').click(function(){ var status = $(this).is(':checked'); alert(status); $('input[type="checkbox"]').prop('checked', status); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input type="checkbox" name="all" checked="true">All / none</label>
<label><input type="checkbox" name="cat1" checked="true">A</label>
<label><input type="checkbox" name="cat2">B</label>
<label><input type="checkbox" name="cat3">C</label>
<label><input type="checkbox" name="cat4">D</label>
As mentioned here, you should make use of jQuery's .prop() function for checking/unchecking checkbox elements.
So try to change your handler like so:
$('input[name="all"]').click(function(){
var status = !!$(this).prop('checked');
alert(status);
$('input[type="checkbox"]').prop('checked', status);
});
To hide/show elements, I recommend iterating over each one:
$('input[type="checkbox"]').each(function() {
var name = $(this).attr('name');
var status = !!$(this).prop('checked');
if (status) {
$('#main').find('.' + name).show();
} else {
$('#main').find('.' + name).hide();
}
});
Regarding your last question for coloring, I'd recommend using a class, say for example gray.
var total = $('input[type="checkbox"]').not('[name=all]').length;
var count = $('input[type="checkbox"]:checked').not('[name=all]').length;
if (count === total) {
$('input[name="all"]').removeClass('gray');
} else {
$('input[name="all"]').addClass('gray');
}
This sets the checkboxes and the div visibility as needed.
It uses opacity to simulate a grayed-out checkbox.
$('[name="all"]').click(function() { //set all checkboxes to match All / none
$(':checkbox')
.prop('checked', this.checked)
.change();
});
$('input')
.change(function() { //show divs corresponding to checked input
var checked= $(':checkbox:not([name="all"]):checked').length;
$('div.' + this.name)
.toggle(this.checked);
$('[name="all"]')
.prop('checked', checked > 0)
.toggleClass('someChecked', checked && checked<$(':checkbox:not([name="all"])').length);
})
.change(); //run the method immediately
$('[name="all"]').click(function() { //set all checkboxes to match All / none
$(':checkbox')
.prop('checked', this.checked)
.change();
});
$('input')
.change(function() { //show divs corresponding to checked input
var checked= $(':checkbox:not([name="all"]):checked').length;
$('div.' + this.name)
.toggle(this.checked);
$('[name="all"]')
.prop('checked', checked > 0)
.toggleClass('someChecked', checked && checked<$(':checkbox:not([name="all"])').length);
})
.change(); //run the method immediately
.someChecked {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="cat1">Element of category1</div>
<div class="cat4">Element of category4</div>
<div class="cat3">Element of category3</div>
<div class="cat1">Element of category1</div>
<div class="cat2">Element of category2</div>
</div>
<label>
<input type="checkbox" name="all" checked="true">
All / none
</label>
<label>
<input type="checkbox" name="cat1" checked="true">
A
</label>
<label>
<input type="checkbox" name="cat2">
B
</label>
<label>
<input type="checkbox" name="cat3">
C
</label>
<label>
<input type="checkbox" name="cat4">
D
</label>
// Bind also the single checkboxes to show/hide the elements in div
$('input[type = "checkbox"]').click(function(){
if($(this).prop('checked'))
$('div.' + $(this).attr('name')).show();
else
$('div.' + $(this).attr('name')).hide();
});
$('input[name="all"]').click(function(){
var status = $(this).is(':checked');
alert(status);
$('input[type="checkbox"]').each(function(){
$(this).prop('checked', status);
if(!status)
$('div.' + $(this).attr('name')).hide();
else
$('div.' + $(this).attr('name')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<div class="cat1">Element of category1</div>
<div class="cat4">Element of category4</div>
<div class="cat3">Element of category3</div>
<div class="cat1">Element of category1</div>
<div class="cat2">Element of category2</div>
</div>
<label><input type="checkbox" name="all" checked="true">All / none</label>
<label><input type="checkbox" name="cat1" checked="true">A</label>
<label><input type="checkbox" name="cat2">B</label>
<label><input type="checkbox" name="cat3">C</label>
<label><input type="checkbox" name="cat4">D</label>
All answers here were great. Just for future reference, I post the one I'll use (which is a mix of #RickHitchcock's and the usage of indeterminate state of a checkbox) :
$('input[name="all"]').click(function() { $(':checkbox').prop('checked', this.checked).change(); });
$('input[type="checkbox"]').change(function() {
var checked = $(':checkbox:not([name="all"]):checked').length;
$('div.' + this.name).toggle(this.checked);
$('input[name="all"]').prop('checked', checked > 0)
.prop('indeterminate', checked && checked < $(':checkbox:not([name="all"])').length);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="cat1">Element of category1</div>
<div class="cat4">Element of category4</div>
<div class="cat3">Element of category3</div>
<div class="cat1">Element of category1</div>
<div class="cat2">Element of category2</div>
</div>
<label><input type="checkbox" name="all" checked>All / none</label>
<label><input type="checkbox" name="cat1" checked>A</label>
<label><input type="checkbox" name="cat2" checked>B</label>
<label><input type="checkbox" name="cat3" checked>C</label>
<label><input type="checkbox" name="cat4" checked>D</label>
Please help, I failed to code the checkbox that can only checked 1 item. Any help would be appreciated. Thanks
Html
<input type="checkbox" name="<%=Name %>" onClick="return checkbox(this)" >
Javascript
function checkbox(a) {
var Count = 0;
if (a.checked)
{
Count = Count + 1;
}
if (Count == 2)
{
alert('choose One Please');
return false;
}
}
You are declaring count inside a method hence it will always be initialised to 0 when you click on check box. Hence declare count globally and maintain the count.
var NewCount = 0;// global declaration
function KeepCount(a){
if (a.checked){
NewCount = NewCount + 1;
}else{
NewCount = NewCount - 1;
}
if(NewCount>1){
alert('Pick Just One Please');
return false;
}
}
UPDATE:
Another approach if you don't want to add variable globally:
HTML
Group 1
<input type="checkbox" value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<br/>
Group 2
<input type="checkbox" value="1" name="test[2][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[2][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[2][]" onclick="addClassCheck(this)"/>
JavaScript
function addClassCheck(element){
if(element.checked){
element.classList.add("marked");
}else{
element.classList.remove("marked");
}
if(document.getElementsByClassName("marked").length>1){
alert("Please select only one check box");
element.checked=false;
element.classList.remove("marked");
}
}
Fiddle demo
Group your checkboxs as
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<br/>
Group 2
<input type="checkbox" class="radio" value="1" name="test[2][]" />
<input type="checkbox" class="radio" value="1" name="test[2][]" />
<input type="checkbox" class="radio" value="1" name="test[2][]" />
Query
$("input:checkbox").click(function() {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
DEMO