Check which checkboxes is checked - javascript

I have read this post and this post and others but i didnt get it to work in my code.
here is the Fiddle for better see my code on live.
this is my js
//////first code to try////
if ($('input.chek').is(':checked')) {
$('.check-addon').css('background-color','green');
}
//////second code///////
var boxes = $('input[class="chek"]:checked');
$(boxes).each(function(){
$('.check-addon').css('background-color','green');
});
this is my html
<div class="inline-container"><div class="checkboxes" >
<span class="check-addon"><input id="id1" class="chek" type="checkbox" value="1" name="id1">title1</span>
<span class="check-addon"><input id="id2" type="checkbox" class="chek" value="1" name="id2">title2</span>
<span class="check-addon"><input id="id3" type="checkbox" class="chek" value="1" name="id3">title3</span>
</div></div>
i dont know what im doing wrong here . i couldnt get the background Green Of the checked box in my code.
any help would much apreciated.
EDIT
even the answers down works in fiddle But i guess i have more problem here.
if i write html code above Normal , the js code is fired and works But im using html code inside js function like that:
function houses(){
var x ='<div class="inline-container"><div class="checkboxes" >
<span class="check-addon"><input id="id1" class="chek" type="checkbox" value="1" name="id1">title1</span>
<span class="check-addon"><input id="id2" type="checkbox" class="chek" value="1" name="id2">title2</span>
<span class="check-addon"><input id="id3" type="checkbox" class="chek" value="1" name="id3">title3</span>
</div></div>';
return x ;
}
so this function when i call it it works but when i want apply the above code on it its not working and not firing at all.
this function is Out of the Dom handler. Fiddle here

Bind the input with a on change event
$('.chek').on('change', function () {
$(this).closest('.check-addon').css('background-color',this.checked?'green':'none');
});
DEMO
Update
You need to use event-delegation on dynamically added elements
$(document).on('change','.chek',function(){
$(this).closest('.check-addon').css('background-color',this.checked?'green':'none');
});

You need to use click/change event to detect the changes on checkboxes. Use:
$('input').change(function(){
if (this.checked)
$(this).parent().css('background-color','green');
else
$(this).parent().css('background-color','none');
});
Demo

You can use this:
$("input:checkbox").on("change", function(){
if($(this).prop("checked")){
$(this).parent(".check-addon").css('background-color','green');
}
else{
$(this).parent(".check-addon").css('background-color','white');
}
});
fiddle

You have to do like this :
1st Way:
$(".chek").change(function () { // will fire when checkbox checked or unchecked
if (this.checked) // check if it is checked
$(this).closest(".check-addon").css('background-color', 'green'); //find parent span and add css
else
$(this).closest(".check-addon").css('background-color','transparent');
})
FIDDLE:
http://jsfiddle.net/2u697b57
2nd Way:
More better approach is to create a css class and add/remove it on check/uncheck:
CSS:
.green
{
background-color:green;
}
JQUERY:
$(".chek").change(function () {
if (this.checked)
$(this).closest(".check-addon").addClass("green");
else
$(this).closest(".check-addon").removeClass("green");
FIDDLE:
http://jsfiddle.net/2u697b57/1/

Related

Cannot add class to next element of $(this)

I want to add class, next to checked input. So, class will be added to span, which is next to a checked input radio.
<label>
<input type="radio" name="option[228]" value="20" checked="checked">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
<img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
</span>
</label>
I have tried a no. of ways to do so... But didn't work. like---
$(document).ready(function(){
if ($('label input').is(':checked')) {
$(this.element).next().addClass('hloo');
alert($(this.element).val());
};
});
But i get an alert of undefined when input is checked.
So,
if ($('label input').is(':checked')) {
is working fine to detect if checkbox is checked But
$(this) or $(this.element)
is not working.
Anyone know what is going wrong?
There's three issues in your code. Firstly ::checked is not a valid jQuery selector, it's just :checked.
Secondly, assuming this is a reference to an Element object (as it is in the vast majority of cases in jQuery) then there is no element property. Just use $(this).
Lastly, if conditions run under the outer scope, so this would refer to the document in your example, not the input. It's for this reason val() is undefined; you're looking at document.value. To fix this, select the element directly before working with it:
$(document).ready(function() {
var $checkedInput = $('label input:checked');
$checkedInput.next().addClass('hloo');
console.log($checkedInput.val());
});
.hloo { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="option[228]" value="20" checked="checked">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
<img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
</span>
</label>

Dynamic Checkbox selector in jquery

I have a series of dyanmic checkboxes which are creating at runtime but with differnt Ids like this (patter is same)
ModellingTagID_1201
ModellingTagID_1202
ModellingTagID_1203
ModellingTagID_1204
I want to know that above check box change or not? how can i make a dyanmic event with dynamic selector? so that i can get that particular checkbox value has changed? is this kind of thing possible?
$jqLib("#ModellingTagID_*").change(function(){
var lastState =$jqLib("#ModellingTagAlternativePlanning").prop("disabled");
$jqLib("#ModellingTagAlternativePlanning").prop("disabled",!lastState);
});
you can apply same class to all those checkboxes
<li><input type="checkbox" id="yourcbid1" name="x" value="1" class="yourcbclass" /> cb1</li>
<li><input type="checkbox" id="yourcbid2" name="x" value="1" class="yourcbclass" /> cb2</li>
and then you can make function for it's change event like this.
$(function(){
$('.yourcbclass').on('change', function() {
if($(this).is(':checked'))
{
//do your stuff here
}
});
});
see if this helps..
Very simple using this way:--
$("#envoyer").click(function(e) {
var myArray = [];
$(":checkbox:checked").each(function() {
myArray.push(this.value);
});
if(myArray == ''){
alert('Please check');
}else{
alert("Checked: " + myArray.join(","));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
one<input type="checkbox" name='checkbox0' value="one_name" checked>
two<input type="checkbox" name='checkbox1' value="one_name1">
three<input type="checkbox" name='checkbox2' value="one_name2">
<input type="button" id="envoyer" value="Envoyer Reponse" />
</body>
</html>
From what I understand, your issue is to distinguish the unique id of the checkbox, which is being, changed. To achieve this, you can simply add a common class to all the elements, alongwith unique random ids.
cb_1<input type="checkbox" class="someclass" id='ModellingTagID_1201' value="value_1" checked>
cb_2<input type="checkbox" class="someclass" id='ModellingTagID_1202' value="value_2">
cb_3<input type="checkbox" class="someclass" id='ModellingTagID_1203' value="value_3">
And then you can simply bind a change event listener to the common class, and fetch the value of the random id, which has been changed, from inside the event listener.
$(document).ready(function(){
$('.someclass').on('change', function() {
alert($(this).attr("id"));
});
});

Buttons to select checkboxes by name

I have the following checkboxes in an HTML form.
<ul id="selection">
<span><label>First<br><input type="checkbox" name="First"></label></span>
<span><label>Second<br><input type="checkbox" name="Second"></label></span>
<span><label>Third<br><input type="checkbox" name="Third"></label></span>
<span><label>Fourth<br><input type="checkbox" name="Fourth"></label></span>
<span><label>Fifth<br><input type="checkbox" name="Fifth"></label></span>
</ul>
I'm trying to create two buttons. One that would select the first two and one that would select all of them.
I managed to select all of them with one button using this:
<input type="button" class="check btn" onClick="select(this)" value="Select All"/>
<script>
$('.check:button').click(function(){
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'Select' )
$(this).data('checked', checked);
});
</script>
But I can't seem to get the two buttons working.
My JavaScript knowledge is pretty limited and been searching for days, unsuccessfully for a solution that works.
Can please someone help? a detailed explanation would be awesome.
Try this:
$("#selectall").click(function() {
$("input[type='checkbox']").prop('checked', true);
});
$("#selecttwo").click(function() {
$("input[name='First'], input[name='Second']").prop('checked', true);
});
$("#resetall").click(function() {
$("input[type='checkbox']").prop('checked', false);
});
DEMO
Are you looking for this, https://jsfiddle.net/wx38rz5L/1261/ ( sorry about css :P ) or https://jsfiddle.net/wx38rz5L/1262/
Reference: https://api.jquery.com/attribute-equals-selector/
$('input[name=First]').prop('checked',true);
$('input[name=Second]').prop('checked',true);
//$('input[name=First],input[name=Second]').prop('checked',true); in one line

jQuery function not executing when checkbox changed

Here's the code I'm working on:
$(document).ready(function(){
var rewrite= function() {
$("#numback_**SQL_Value**").attr("readonly" , "readonly");
$("#numback_**SQL_Value**").attr("value" ,function() { return ($(".Report_Box").size() +**SQL_Value**;)}
)};
$(".Report_Box").click(rewrite);
});
Report_Box is a class of checkboxes later in the code. When one of the checkboxes is changed, the rewrite function is supposed to trigger.
Rewrite is supposed to lock the numback input box, turning it read only as I set the value to the number of Report_Box'es clicked.
I simplified your code to this - and it worked ok. I added the code you can use to make the input readonly...
See the description of using prop not attr here:
Setting a control to readonly using jquery 1.6 .prop()
<div>
<input type="checkbox" class="Report_Box"/>
<input type="checkbox" class="Report_Box"/>
<input type="checkbox" class="Report_Box"/>
<input type="checkbox" class="Report_Box"/>
<input type="checkbox" class="Report_Box"/>
<input type="text" id="makero"/>
<script>
$(document).ready(function(){
var rewrite= function() {
$('#makero').val($(".Report_Box").size()).prop('readonly', true);
console.log($(".Report_Box").size());
};
$(".Report_Box").click(rewrite);
});
Could it be the typos that is causing your trouble? Try this:
$("#numback_**SQL_Value**").attr("value", function() { return($(".Report_Box").size()+"**SQL_Value**");} )};

jquery selector / checked attribute doesn't update in IE7

I have a function that's called by a link which should check various checkboxes which exist inside a specific div (passed to the function.) Works in all browsers except IE (7.) As far as I can tell .attr('checked', 'checked' is the proper way to do this using jquery 1.5.1
function selectall(industry){
$("#"+industry+"Apps :checkbox").attr('checked', 'checked');
$("#"+industry+"Apps :checkbox").change(); /* used for jqtransform plugin */
}
Is there something I'm missing or a better way to do this that works in all browsers? I don't really care about un-selecting, just selecting.
HTML looks like
<div id = 'HealthcareApps'>
<div style="clear: both;">
Select all
</div>
<ul>
<li><label for="id_Healthcare_0"><input type="checkbox" name="Healthcare" value="1" id="id_Healthcare_0" /> Simple Messaging</label></li>
<li><label for="id_Healthcare_1"><input type="checkbox" name="Healthcare" value="2" id="id_Healthcare_1" /> Mobile Alerts and Alarms</label></li>
<li><label for="id_Healthcare_2"><input type="checkbox" name="Healthcare" value="3" id="id_Healthcare_2" /> Patient Identification / Drug Conflicts</label></li>
</ul>
(yes, I know inline styles are a horrible idea. I'll fix that as well if I can ever get this link to work in IE.)
You could try something like this: js fiddle demo
<div id = 'HealthcareApps'>
<div style="clear: both;">
<a href="#" id="selectall" class="Healthcare" >Select all</a>
</div>
<ul>
<li><label for="id_Healthcare_0"><input type="checkbox" name="Healthcare" value="1" id="id_Healthcare_0" /> Simple Messaging</label></li>
<li><label for="id_Healthcare_1"><input type="checkbox" name="Healthcare" value="2" id="id_Healthcare_1" /> Mobile Alerts and Alarms</label></li>
<li><label for="id_Healthcare_2"><input type="checkbox" name="Healthcare" value="3" id="id_Healthcare_2" /> Patient Identification / Drug Conflicts</label></li>
</ul>
</div>
jquery:
$('#selectall').click(function(e) {
e.preventDefault();
var industry = $(this).attr("class");
$("#" + industry + "Apps :checkbox").attr('checked', 'checked');
});
And, to toggle on and off:
$('#selectall').click(function(e) {
e.preventDefault();
var industry = $(this).attr("class");
var checkbox = $("#" + industry + "Apps :checkbox");
checkbox.attr('checked', !checkbox.attr('checked'));
});
js fiddle toggle demo
Try this
function selectall(industry){
$("#"+industry+"Apps :checkbox").attr('checked', true);
$("#"+industry+"Apps :checkbox").change(); /* used for jqtransform plugin */
}
If you use jQuery 1.6+ you can use prop
$("#"+industry+"Apps :checkbox").prop('checked', true);
Try using click() instead of change(). This seems to be an IE7 bug:
IE7 issues with my jQuery [click and change functions]
try
$("#"+industry+"Apps input:checkbox").attr('checked', 'checked');
I don't have time to verify this ( at work :) ) but I have a sneaking suspicion this will help ie7 figure it out
In your markup, the 'HealthcareApps' div does not have a closing tag. Perhaps this is a copy/paste omission, but if it is not, then invalid markup could feasibly be the reason, especially since it's IE7 that is complaining.

Categories

Resources