So i have this code
<ul id="id_priori">
<li>
<label for="id_priori_0">
<input id="id_priori_0" name="priori" type="radio">Hola
</label>
</li>
</ul>
And this code
$("#id_tipo").on('click', 'li', function () {
var self = $(this),
radio = self.find(":radio")[0];
radio.checked = !radio.checked;
self.toggleClass('on', radio.checked);
})
.find(":radio").each(function () {
$(this).closest('li').toggleClass('on', this.checked);
});
What i want is to unclass all the labels whose radio's arent checked , any idea ?
$(":radio:not(checked)").each(function () {
$(this).closest('li').removeClass('on');
});
Anyway, assuming all radios are connected, and there is always only one checked, the whole code could be simpler:
$("#id_priori").on('click', 'li', function () {
$(this).find(':radio').prop('checked', true);
$(this).addClass('on').siblings().removeClass('on');
});
Take a look at this Fiddle. We can work from this point
Assuming you mean remove all class from each <label> add it in the find:
.find(":radio").each(function () {
if( !this.checked){
$(this).parent('label').removeAttr('class');
}
$(this).closest('li').toggleClass('on', this.checked);
});
if you want to remove class just go with #littleLouito Code
else if you want toggle try this one
$(":radio:not(checked)").each(function () {
$(this).closest('label').toggleClass("on", this.checked);
});
Related
I am here again
SEE DEMO HERE
$(document).ready(function () {
$("#id_priori").on('click', 'li', function(){
var self = $(this),
checkbox = self.find(":checkbox")[0];
checkbox.checked = !checkbox.checked;
self.toggleClass( 'on', checkbox.checked );
}).find(":checkbox").each(function(){
$(this).closest('li').toggleClass('on', this.checked);
});
$("#id_tipo").on('click', 'li', 'label', function () {
var self = $(this),
radio = self.find(":radio")[0];
radio.checked = !radio.checked
$(":radio:not(checked)").each(function () {
$(this).closest('li').toggleClass("on", this.checked);
});
})
.find(":radio").each(function () {
$(this).closest('li').toggleClass('on', this.checked);
});
});
Everything works fine but for the labels , when I click them they dont check , doing a little tweaks it seems like one event is triggrering multiple times and it unchecks them , try setting an alert and you'll see what I mean
Any idea whats wrong ?
Because you're taking over the role of the actual input you need to allow the input element to carry on with its own behavior (http://jsfiddle.net/icodeforlove/rF2FT/2/)
if (event.target === checkbox) return;
All you need to do is return early if the target is the actual input element. Right now the input element is checking itself and then you're telling it to uncheck itself.
I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.
Here is what I am using::
So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
In View page I have declared::
function Checkme(class_Name) {
Check_OR_Uncheck(class_Name);
}
In Common js::
function Check_OR_Uncheck(class_Name) {
$("." + class_Name).click(function () {
if ($(this)[0].checked) {
$("." + class_Name).each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
}
else {
$(this)[0].checked = false;
}
});
}
Please Help me to achieve this..
Keep your code in the document ready event. This will register the click event for "myclass".
$(".myclass").click(function () {
if ($(this)[0].checked) {
$(".myclass").each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
} else {
$(this)[0].checked = false;
}
});
jsfiddle
You could use document ready handler and call method:
jsFiddle
$(function(){
$(':checkbox:checked').each(function(){
Checkme(this.className);
});
});
Try this
$(function(){
$('.myclass').click(function(){
var s=$(this).prop('checked');
if(s==true)
{
$('.myclass').prop('checked',false)
$(this).prop('checked',true)
}
});
});
Or
You simply can use
if(s==true)
{
$(this).siblings().prop('checked',false);
}
FIDDLE
Try this
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).
The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516
I have dynamically created a list of checkboxes inside a table:
$("#employeeRegister").append('<tr><td><input type="checkbox" class = "check" name ="chk'+i+'" value="'+this.employeeMobileNo+'$'+this.employeeEmailId+'" </td></tr>');
The above code runs 10 times inside a loop to generate 10 checkboxes dynamically.
I tried using this below code to see if a checkbox is checked.
$(document).ready(function () {
$(document).on("click", "#smsbutton", function () {
console.log('alert');
$("input:checkbox[name=type]:checked").each(function () {
alert(checked);
});
});
});
smsbutton is a button on whose click event I want to get checkboxes that are checked. But it does not work. What do I do to get all checked checkboxes?
Try this:
$("input.check:checked").each(function() {
alert(this.name + " is checked");
});
just use an attribute selector like
$(document).on("click","#smsbutton", function(){
$('input[type="checkbox"]:checked');
console.log($('input[type="checkbox"]:checked').serialize());
});
OR
$(document).on("click","#smsbutton", function(e){
if (e.handled !== true) {
e.handled = true;
e.preventDefault();
$('input[type="checkbox"]:checked').each(function() {
console.log(this.value);
});
}
});
I have a HTML form with checkboxes as below,
when I select ALL, other check boxes {HR, FINANCE, IT, SALES} should get checked
When I un select ALL, other checkboxes {HR, FINANCE, IT, SALES} should get unchecked
When everything is checked and of one the checkboxes {HR, FINANCE, IT, SALES} is unchecked, ALL should be unchecked
Below is the markup of my HTML.... how can I so it using jQuery/javascript ????
<input type="checkbox" name="Dept" value="ALL"/>
<input type="checkbox" name="Dept" value="HR"/>
<input type="checkbox" name="Dept" value="FINANCE"/>
<input type="checkbox" name="Dept" value="IT"/>
<input type="checkbox" name="Dept" value="SALES"/>
Try this
jQuery > 1.6
// Cache the selectors as they are being multiple times
var $all = $('input[value=ALL]'),
$inputs = $('input');
$all.change(function () {
// Set the other inputs property to the all checkbox
$inputs.not(this).prop('checked', this.checked);
});
// Change event for all other inputs
$inputs.not($all).change(function () {
var $others = $inputs.not($('input[value=ALL]'));
// Get the checked checkboxes
var $checked = $others.filter(function () {
return this.checked;
});
// If length is not equal then uncheck the All checkbox
if ($others.length !== $checked.length) {
$all.prop('checked', false);
}
});
jQuery 1.4.4
var $all = $('input[value=ALL]'),
$inputs = $('input');
$all.change(function () {
var allChk = this;
$inputs.each(function() {
this.checked = allChk.checked;
});
});
$inputs.not($('input[value=ALL]')).change(function () {
var $others = $inputs.not($('input[value=ALL]'));
var $checked = $others.filter(function () {
return this.checked;
});
if ($others.length !== $checked.length) {
$all[0].checked = false;
}
});
jQuery > 1.6 Fiddle
jQuery 1.4.4 Fiddle
Try this,
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
where case is the class added to othe check boxes
For online demo visit,
http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/
DEMO
$('input[type="checkbox"][name="Dept"]').change(function () {
if (this.value == 'ALL') {
$('input[name="Dept"]').prop('checked', this.checked);
}
});
Updated Demo with jQuery 1.5.2
$('input[type="checkbox"][name="Dept"][value="ALL"]').change(function () {
$('input[name="Dept"]').attr('checked', this.checked);
});
$('input[type="checkbox"][name="Dept"]:gt(0)').change(function () {
if (!this.checked) {
$('input[name="Dept"][value="ALL"]').removeAttr('checked');
}
if ($('input[type="checkbox"][name="Dept"]:gt(0)').length == $('input[type="checkbox"][name="Dept"]:gt(0):checked').length) {
$('input[type="checkbox"][name="Dept"][value="ALL"]').attr('checked',true);
}
});
Here's one way to do it:
$(document).ready(function() {
var $cbs = $('input[name="Dept"]').click(function() {
if (this.value==="ALL")
$cbs.prop("checked", this.checked);
else if (!this.checked)
$cbs[0].checked = false;
});
});
Jawdroppingly good demo: http://jsfiddle.net/MNbDw/2/
Note that obviously my code above has a hardcoded assumption that the "ALL" checkbox will be the first one (at the point where I unchecked it using $cbs[0]). You could change the else if case to do this instead:
$cbs.filter('[value="ALL"]').prop("checked",false);
Demo: http://jsfiddle.net/MNbDw/3/
Or change your html to give that particular checkbox an id or whatever.
UPDATE: The .prop() method was introduced in jQuery 1.6. For version 1.5.2 (as mentioned in a comment) use .attr() instead as shown here (though 1.5.2 is so old that jsfiddle doesn't actually offer it as an option so I had to add it under "External Resources"): http://jsfiddle.net/MNbDw/9/
I write a simple function to clone a field:
Online Demo: http://jsfiddle.net/5yVPg/
HTML:
<div id="main">
<a id="add-input" href="#">+ add</a>
<p class="child">
<input type="text" name="user[]" />
delete
</p>
</div>
JS:
$(document).ready(function () {
$('#add-input').click(function () {
var newField = $('.child').clone()
newField.toggle().attr('class', '')
registerRemoveHandlers(newField, '.icon-delete')
$(this).parent().append(newField)
return false
})
function registerRemoveHandlers(el, class) {
$(el).find(class).click(function () {
$(this).parents('p:first').remove()
return false
})
}
})
I want to remove the delete icon from the first input, I tried :
$('p.child .icon-delete:first').css('display','none')
But the delete icon being not displayed for all input.
PS: If I could optimize the codes above I'll be happy :)
Have a look at this instead:
// Keep a single clone of the original
var clonedField = $('.child').clone(),
main = $('#main');
// Add in the delete <a> to the cloned field
$('<a>', {
text: 'delete',
class: 'icon-delete',
href: '#',
click: function(){
$(this).parent().remove();
return false;
}
}).appendTo(clonedField);
// Clone the cloned original and append it back to the list
$('#add-input').click(function() {
main.append(clonedField.clone());
return false;
});
The code is simpler and easier to understand then what you have there, and should work as you expect it.
See it on jsfiddle: http://jsfiddle.net/5ZFh6/
DEMO: http://aseptik.net/demo/remove-first-class-with-jquery-while-cloning
$(function() {
$('#add-input').click(function() {
$('<p><input type="text" name="user[]" /> ' +
'delete</p>').appendTo('#main');
});
// just for sake...
$('.icon-delete').live('click',
function() {
$(this).parent().fadeOut(500,
function() {
$(this).remove();
});
});
});
gotchas:
why you are cloning?
why you are placing the delete button in the first place?
i think this will do the trick.......$('p.child .icon-delete:first').css('display','none') is hiding all .icon-delete which is child of p.child. and in your case all p.child is a child of .icon-delete
$('p.child:first .icon-delete').css('display','none')
$('#add-input').bind('click',function ()
{
var newField = $('.child').clone();
newField.toggle().attr('class', '');
registerRemoveHandlers(newField, '.icon-delete');
$('p.child:last').after(newField); //append after not cloned child
newField.parent().children('p').find('a').show(); //show all 'delete' label
newField.prev().find('a').hide(); //hide label from the first child which is right the one before our clone
return false;
});
http://jsfiddle.net/K7F5K/