I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$(document).on('click','[id^=element-]', function(e) {
console.log(this.id);
});
} else {}
});
I tested this example and it's not working. I have not idea when I'm wrong.
The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:
$(document).on('click', '[id^="element-"]', function(e) {
if ($('#checkbox1').is(':checked'))
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox1" />
Check me!
</label>
<div>
<button id="element-foo">Foo</button>
<button id="element-bar">Bar</button>
</div>
I tested it out, and this will work for you
$("input[id^=d]").on("click", function() {
var id = $(this).prop("id");
if ($("#c1").is(":checked")) {
console.log(id);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />
Related
There is a global listener on specific input type:
$('input[type["radio"]').on('change', function() { ... });
But I have another more specific radio input with its own unique_radio class:
<input type="radio" class="unique_radio" name="unique_radio">
It also has its own click listener:
$('.unique_radio').on('click', function() { ... });
When I click it, both listeners trigger the functions, but I need only the function with the unique_radio listener to be triggered.
I have tried using stopImmediatePropagation and off as seen here:
Best way to remove an event handler in jQuery?
But that did not seem to work
Your selector is not working with my jquery but you can see below my sample so you can use it directly. You can use this to ignore input with unique_radio class. Use :not() explain with this you dont have to use preventDefault or return false.
My code;
$('input[type="radio"]:not(.unique_radio)').on('change', function(){
console.log(1);
});
$('.unique_radio').on('change', function() {
console.log(2);
});
Here is if you attach event listener to all radio
$('input[type="radio"]').on('change', function() {
console.log($(this).data('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>First</label>
<input type="radio" name="unique_radio" data-id="first">
</div>
<div>
<label>Second</label>
<input type="radio" name="unique_radio" data-id="second">
</div>
<div>
<label>Third</label>
<input type="radio" class="unique_radio" name="unique_radio" data-id="third">
</div>
If you want to remove listener on one radio with a particular class you can do it in different way
Here you restrict the execution only for radios which hasn't class unique_radio
$('input[type="radio"]').on('change', function() {
let $target = $(this);
if(!$target.hasClass('unique_radio')) {
console.log($target.data('id'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>First</label>
<input type="radio" name="unique_radio" data-id="first">
</div>
<div>
<label>Second</label>
<input type="radio" name="unique_radio" data-id="second">
</div>
<div>
<label>Third</label>
<input type="radio" class="unique_radio" name="unique_radio" data-id="third">
</div>
Here if you want to remove the handler
let handler = function() {
console.log($(this).data('id'));
}
$('input[type="radio"]').on('change', handler);
$('.unique_radio').unbind('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>First</label>
<input type="radio" name="unique_radio" data-id="first">
</div>
<div>
<label>Second</label>
<input type="radio" name="unique_radio" data-id="second">
</div>
<div>
<label>Third</label>
<input type="radio" class="unique_radio" name="unique_radio" data-id="third">
</div>
This question already has answers here:
Disable/enable an input with jQuery?
(19 answers)
Closed 6 years ago.
I want to write a program to enable and disable button on checkbox through remove attribute jQuery code.
I tried it but it didn't work.
$(document).ready(function() {
$('#myCheckBox').on('change', function() {
var x = $(this).attr('value');
if (x == 'on') {
$('#myButton').removeAttr('disabled');
} else if (x == undefined) {
$('#myButton').attr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
I am a beginner in jQuery, please comment below for any query.
Use .is(':checked') instead of checing the value. also replace :
$('#myButton').attr('disabled'); //Get the value
By :
$('#myButton').attr('disabled','disabled'); //Set the value
To set the value.
NOTE : you could do this using prop() instead :
$("#myButton").prop('disabled', !$(this).is(':checked'));
Hope this helps.
attr()/removeAttr() Snippet :
$(document).ready(function(){
$('#myCheckBox').on('change',function(){
if( $(this).is(':checked') ){
$('#myButton').removeAttr('disabled');
}else{
$('#myButton').attr('disabled','disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
prop() Snippet :
$(document).ready(function(){
$('#myCheckBox').on('change',function(){
$("#myButton").prop('disabled', !$(this).is(':checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
You're over thinking this a bit. First use .prop() not .attr(). Second, just set the disabled property to the opposite of the checkbox's state with:
$('#myCheckBox').on('change', function() {
$('#myButton').prop('disabled', !$(this).is(':checked'));
})
$(document).ready(function() {
$('#myCheckBox').on('change', function() {
$('#myButton').prop('disabled', !$(this).is(':checked'));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
You don't need to use attr('value') use this.checked instead to get checkbox status. Then use prop() method to set button status like following.
$('#myCheckBox').on('change', function() {
$('#myButton').prop('disabled', !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
There are two issues with the code:
var x = $(this).attr('value'); will always return the value of the checkbox, whether it's checked or not. I fyou want to check its checked state, it's the checked property on the element (this.checked in your handler, or $(this).prop("checked") if you want more jQuery).
$('#myButton').attr('disabled'); is a no-op: It reads the value of the attribute, and then throws it away. To set it, you'd do $('#myButton').attr('disabled', 'disabled');
Note that using prop('disabled', trueOrFalse) is the preferred way to set/clear the disabled state.
$('#myCheckBox').on('change', function() {
$("#myButton").prop('disabled', !this.checked);
});
But since you specifically said you wanted to use the attribute:
$(document).ready(function() {
$('#myCheckBox').on('change', function() {
if (this.checked) {
$('#myButton').removeAttr('disabled');
} else {
$('#myButton').attr('disabled', 'disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
But here's an example of using the property, which is really the way to go:
$(document).ready(function() {
$('#myCheckBox').on('change', function() {
$('#myButton').prop('disabled', !this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myCheckBox">
I agree with terms and conditions
<input type="checkbox" id="myCheckBox" />
</label>
<br />
<br />
<input type="button" id="myButton" value="Submit" disabled />
Use the is method of checkbox. Use this JS fiddle:
$(document).ready(function() {
$('#myCheckBox').on('change', function() {
var x = $(this).attr('value');
if($(this).is(':checked')) {
$('#myButton').prop('disabled','');
} else {
$('#myButton').prop('disabled','disabled');
}
});
});
$(document).ready(function() {
$('#myCheckBox').on('change', function() {
if ($(this).is(":checked")) {
$('#myButton').removeAttr('disabled');
}else{
$('#myButton').attr('disabled', 'disabled');
}
});
});
I have a checkbox inside a P with class vertical options. I have written script to implement checkbox functionality even on clicking the P. The code is:
$(".vertical-options,.horizontal-options").click(function(event){
var input = $(this).find('input').first();
console.log(input);
if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) {
if(input.is(':checked')){
input.prop('checked', false);
} else {
input.prop('checked', true);
}
}
});
but with this logic clicking on the checkbox label does not work. What am I doing wrong?
You need to use label tag for this purpose. Write id of target checkbox in for attribute of label tag.
<label for="id1">Checkbox-1</label>
<input type="checkbox" id="id1" />
<label for="id2">Checkbox-2</label>
<input type="checkbox" id="id2" />
<label for="id3">Checkbox-3</label>
<input type="checkbox" id="id3" />
If you want to do this work using jquery for other tag, see example
$("p").on("click", function(e){
var checkbox = $(this).find(':checkbox');
if ($(this).is(e.target))
checkbox.prop('checked', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Checkbox-1
<input type="checkbox" />
</p>
<p>
Checkbox-2
<input type="checkbox" />
</p>
<p>
Checkbox-3
<input type="checkbox" />
</p>
I have this javascript code
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
And I have this
<form action="" method="POST">
Toggle All :
<input type="checkbox" name="select-all" id="select-all" />
then at my table I have multiple checkbox
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select
When I click on toggle all, it does not check checkbox-1 to checkbox-4
What went wrong in my javascript code.
Thanks!! I want to actually do a function that will send all the value of checkbox1-4 by post when they are checked on form submit.
Simply do like this.
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
You do not need to loop through each checkbox to check all.
Demo
Wrap the code in dom ready if your script is in head tag
$(document).ready(function() {
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
});
My problem is that when the checkbox below is clicked - the check function is called to check/uncheck all the checkboxes. But they have to change relatively to the invoking checkbox (the one with the "onchange" event).
The checkbox HTML declaration:
<input type="checkbox" onchange="$('input[type=checkbox][rel=users]').check();">
Sample JavaScript Code:
$.fn.check = function() {
$(this).each(function(){
$(this).attr('checked', checked);
});
}
And my question is: How can I get the DOM object corresponding to the "check all" checkbox?
Edit: Pass the this object of the checkAll to the function.
DEMO
<input type="checkbox"
onchange="$('input[type=checkbox][rel=users]').check(this);" />
Note the this is passed as .check(this)
And in the JS:
$(document).ready(function() {
$.fn.check = function(orgEl) {
$(this).each(function() {
$(this).attr('checked', orgEl.checked);
});
}
});
Old Post -
Bind the checkAll checkbox to an handler and call the fxn from inside.. See below,
HTML
<input type="checkbox" id="checkAll" >
JS
$(document).ready (function () {
$('#checkAll').click (function () {
//this inside is checkAll checkbox object.
$('input[type=checkbox][rel=users]').check();
});
});
Since you're binding this to the "checkall" checkbox, you have access to itself inline. So you can pass it to the jQuery .check() function you made and use it there. Look at this:
(please excuse my changes to your selecting, you can obviously use what you had before...but I would suggest using :checkbox instead of input[type=checkbox])
<html>
<head>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
$.fn.check = function (obj) {
$(this).each(function (){
this.checked = obj.checked;
});
}
</script>
</head>
<body>
<input type="checkbox" id="checkall" onclick="$('.check-item').check(this);" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<body>
View on JSFIDDLE.
I'm a fan of using HTML5 data attributes for stuff like this. With the following DOM structure, you can define your target checkboxes with a data-target attribute on the triggering checkbox. The target should be a valid jQuery selector string.
HTML:
<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">
<label for="checkUsers">Users:</label>
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<br><br>
<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">
<label for="checkPlaces">Places:</label>
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
Then you setup the plugin to use the target you defined to trigger the checks/unchecks based on the triggering checkbox's checked attribute.
Plugin:
(function( $ ){
$.fn.check = function() {
// "this" is a jQuery object of the checkbox that was clicked.
var target = this.data("target");
$(target).attr("checked", this[0].checked);
return this; //maintain chainability
};
})( jQuery );
The real benefit of this method is that it allows you to only have to manage one event handler declaration by attaching the event to a class instead of an id.
Event Handler Declaration:
$(function(){
$(".checkAll").click(function(){
$(this).check();
});
});