I have a few checkboxes that I need to be selected with the enter key instead of the space bar when it has focus. I have the code below that works for one check box, but I need multiple checkboxes. I know the id tag needs to be unique, but I'm not sure how to do it.
$(document).ready(function () {
$('#mycheckbox').on('keypress', function (event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">My text<br>
I'm trying to get this to work on all the checkboxes not just the one with the mycheckbox id.
Here's my full code so far:
`
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input:checkbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
}
});
});
</script>
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></
script>
<textarea class="textfield" id="form1" name="form1">My text
here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>
<script type="text/javascript">
function updateTextArea() {
var allVals = $('#form1').data('initialVal'),
lineCount = 1;
$('.taglist :checked').each(function(i) {
allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val
();
lineCount++;
});
$('#form1').val(allVals).attr('rows', lineCount);
}
$(function() {
$('.taglist input').click(updateTextArea);
$('#form1').data('initialVal', $('#form1').val());
updateTextArea();
});
</script>
</body>
</html>
`
Sounds like you are trying to get this to work on all checkboxes? In that case use $( ":checkbox" ) instead of $('#mycheckbox')
You can use input[type="checkbox"] or add a class to every checkbox and yes ids must be unique:
$(document).ready(function() {
$('input[type="checkbox"]').on('keypress', function(event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox1">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox2">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox3">My text<br>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox4">My text
Changing the selector should do the trick:
$('input[type=checkbox]')
This will return all inputs of type checkbox. Another approach is to give all the checkboxes you are interested in a class, and then match the class - I suggested this approach as well, in case you don't want to apply it to all of them. So the HTML:
<input type="checkbox" class="support-enter" />
Then the jquery selector:
$('.support-enter')
Or you can use class selector instead of id selector. Just add some class to your checkbox.
Use attribute-equal selector to get the inputs of type checkbox like this:
$(document).ready(function() {
$('input[type = "checkbox"]').on('keypress', function(event) {
if (event.which === 13) {
this.checked = !this.checked;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike">My text<br>
<input type="checkbox" name="Colors" value="Bike">Other text<br>
You have to use classes instead.
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
Jquery
$('.mycheckbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
}
});
Another method is to use a type selector in order to get the input elements with certain type.
$('input[type=checkbox]')
$(':checkbox').on('keypress', function (event) {
if (event.which === 13) {
$(this).prop('checked', !$(this).prop('checked'));
$('textarea').html($(this).prop('checked').toString());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>
<textarea></textarea>
$(document).on('keypress', function(event) {
if (event.keyCode == 13) {
$('#mycheckbox').prop('checked', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">
Related
Here's my HTML, where I have two radio buttons. The default checked button is the "lease" button.
<input
id="quotation_request_payment_option_lease"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="lease"
checked="checked">
<input
id="quotation_request_payment_option_finance"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="finance">
What I want to do is, when the lease button is checked, print "lease" to the console. And when "finance" is checked, print "finance" to the console.
I've tried various things to no avail.
This doesn't work:
$(document).ready(function() {
$('input[type=radio[name='quotation_request[payment_option]']').change(function() {
if (this.value == 'lease') {
console.log("lease");
}
else if (this.value == 'finance') {
console.log("finance");
}
});
});
$(document).ready(function() {
$(":radio[name='quotation_request[payment_option]']").change(function() {
if (this.value == 'lease') {
console.log("lease");
} else if (this.value == 'finance') {
console.log("finance");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="lease" checked="checked"/>
<input id="quotation_request_payment_option_finance" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="finance" />
Change your selector like above.
You can use :radio to select radio buttons
Run the snippet to see the change in the console
$('input[type=radio]').change(function() {
console.log( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
id="quotation_request_payment_option_lease"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="lease"
checked="checked">
<input
id="quotation_request_payment_option_finance"
class="choose_payment_option"
name="quotation_request[payment_option]"
type="radio"
value="finance"
checked="checked">
In html checkbox add following trigger
onchange="myFunction(this)"
and in my Function
function myFunction(element)
{
//do stuff
}
How about this
Your jquery selector was wrong. It should be
$("input[type='radio'][name='quotation_request[payment_option]']").change(function(){
var value = $(this).val()
if(value == "lease") {
console.log(value);
} else if(value == "finance") {
console.log(value);
}
});
You could write selected value to console directly. Use combination of single and double quotes for your CSS selector.
$("input[type=radio][name='quotation_request[payment_option]'").change(function() {
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="lease" checked="checked">
<input id="quotation_request_payment_option_finance" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="finance" checked="checked">
Your CSS selector is what is causing the issue try using:
$("input[name='quotation_request[payment_option]']").change(function() {
...
}
I have a number of checkboxes that change state(checked ,not checked) using another jQuery statement:
Elements:
<input type="checkbox" id="select_a">select group A</input>
<input type="checkbox" id="select_b">select group B</input>
<input type="checkbox" id="mix">select mix</input>
<div id="group_a">
<input type="checkbox" id="a_1">group A_1</input>
<input type="checkbox" id="a_2">group A_2</input>
</div>
<div id="group_b">
<input type="checkbox" id="b_1">group B_1</input>
<input type="checkbox" id="b_2">group B_2</input>
</div>
JQUERY
jQuery("#select_a").click(function () {
if (this.checked) jQuery("div#group_a input:checkbox").prop("checked", true);
else jQuery("div#group_a input:checkbox").prop("checked", false);
});
jQuery("#select_b").click(function () {
if (this.checked) jQuery("div#group_b input:checkbox").prop("checked", true);
else jQuery("div#group_b input:checkbox").prop("checked", false);
});
jQuery("#mix").click(function () {
if (this.checked) {
jQuery("#a_1").prop("checked", true);
jQuery("#b_1").prop("checked", true);
} else {
jQuery("#a_1").prop("checked", false);
jQuery("#b_1").prop("checked", false);
}
});
I need a way to set a listener to each checkbox in the groups, I used this way which works like this:
jQuery("div input:checkbox").click(function(e){
alert(e.target.id);
});
but this only works if the checkbox was clicked by the mouse, I would like a way to fire an event(set a listener) for each checkbox if it was checked by something other than the mouse.
Demo
You can use change() event handler
jQuery("div input:checkbox").change(function(){
alert(this.id);
});
Try change event, also for the top controls use radio instead of checkbox as any one would be checked:
$(function() {
var grp1 = $('#group_a').find('input[type=checkbox]');
var grp2 = $('#group_b').find('input[type=checkbox]');
$('input[name=grp]').on('change', function(e) {
var id = this.id;
grp1.prop('checked', 'select_a' === id);
grp2.prop('checked', 'select_b' === id);
if ('mix' === id) {
grp1.eq(0).prop('checked', true);
grp2.eq(0).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- use radio with name -->
<input type="radio" name="grp" id="select_a" />select group A
<input type="radio" name="grp" id="select_b" />select group B
<input type="radio" name="grp" id="mix" />select mix
<div id="group_a">
<input type="checkbox" id="a_1" />group A_1
<input type="checkbox" id="a_2" />group A_2
</div>
<div id="group_b">
<input type="checkbox" id="b_1" />group B_1
<input type="checkbox" id="b_2" />group B_2
</div>
The toggle check box function is only working once and after the first instance it doesnt work. Any help?
Here is the jsfiddle:
http://jsfiddle.net/66gmK/
<script>
$(document).ready(function() {
$(document).on('click','#1',function(){
$("INPUT[type='checkbox']").each(function(){
var Checked = $(this).attr('checked');
$(this).attr('checked', !Checked);
});
});
});
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<input name="checkbox" type="checkbox" id="1" value="0" />
<label for="1" >Toggle All</label>
</p>
<p>
<input name="checkbox" type="checkbox" id="2" value="0" />
ahmed</p>
<p>
<input name="3" type="checkbox" id="3" value="0" />
<label for="3">omar</label>
</p>
</form>
</body>
Move the Checked variable out of the each because the this context changes in the each, it refers to the checkbox in the loop, not the toggle checkbox. Remove the ! not operator when changing the checked property. Also use prop instead of attr for the checked property.
Demo
$(document).ready(function() {
$(document).on('click','#1',function(){
var Checked = $(this).prop('checked');
$("INPUT[type='checkbox']").each(function(){
$(this).prop('checked', Checked);
});
});
});
your jquery
on each function , you should not change the property of toggle checkbox.
$(document).ready(function() {
$(document).on('click','#1',function(){
$("INPUT[type='checkbox']").not(this).each(function(){
var Checked = $(this).prop('checked');
$(this).prop('checked', !Checked);
});
});
});
Demo
You can also use
$(document).ready(function() {
$('#1').on('click',function(){
var Checked = $(this).prop('checked');
$.each($("input[type='checkbox']"), function(i,e){
$(e).prop('checked', Checked);
});
});
});
I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).
I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
Could you tell me some simple approach how to get it work? Thanks a lot!
demo
updated_demo
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});
HTML:
<form>
<label>
<input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>
JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/
Thanks to #Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.
FIDDLE
HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
SCRIPT
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
And now add this to manage the master checkbox as well...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});
Add extra script according to your checkbox group:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
HTML Code:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>
use this i hope to help you i know that this is a late answer but if any one come here again
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
Master CheckBox:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
Child CheckBox:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="#employee.Id" />```
You can use jQuery like so:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
A fiddle.
var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
In HTML:
Master Check box <input type="checkbox" onClick="toggle(this);">
Other Check boxes <input type="checkbox" name="ALL">
You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});
I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.
Here is the basic idea
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
if there are other elements that are siblings, than you would beed to filter the siblings
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
jsFiddle
I have a checkbox select all issue. I have multiple checkbox that can be triggered by a master one.
If the master one is check then you can select any checkbox (which this works). Now my problem is when i check "none" all of them are gone even the master
What I need is not to unchecked the master. I can have as many as checkbox as I want.
Is there a solution to do this without putting an ID on each or automatically uncheck all checkbox and not the master one?
here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').click(function() {
if(!$('#master').is(':checked')) { return;
} $('input[type="checkbox"]').attr('checked', true);
});
$('#checkNone').click(function() {
$('input[type="checkbox"]').attr('checked', false); });
$('#master').click(function() { if($('#master').is(':checked')) {
return; } $('input[type="checkbox"]').attr('checked', false);
});
$('input[type="checkbox"]').click(function() {
if(!$('#master').is(':checked')) { $(this).attr('checked', false);
}
});
});
</script>
</head>
<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>
<input type="checkbox" value="1" id="c1">1
<input type="checkbox" value="2" id="c2">2
<input type="checkbox" value="3" id="c3">3
<input type="checkbox" value="4" id="c4">4
<input type="checkbox" value="5" id="c5">5
Based on your code, I would add a wrapper around the check-box you want to select all/none and then give the wrapper id and inputs to select all or none.
$('#list input[type="checkbox"]').attr('checked', false);
or for jQuery 1.6+
$('#list input[type="checkbox"]').prop('checked', false);
This way, you can control all your checkboxes without affecting the "master" one.
Here's the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').click(function() {
if(!$('#master').is(':checked')) {
return;
}
$('#list input[type="checkbox"]').attr('checked', true);
});
$('#checkNone').click(function() {
$('#list input[type="checkbox"]').attr('checked', false);
});
$('#master').click(function() {
if($('#master').is(':checked')) {
return;
}
$('#list input[type="checkbox"]').attr('checked', false);
});
$('#list input[type="checkbox"]').click(function() {
if(!$('#master').is(':checked')) {
$(this).attr('checked', false);
}
});
});
</script>
</head>
<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>
<div id="list">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
</div>
You only need a very small modification to exclude your master.
You can do that with a .not("#master") like this:
$('#checkNone').click(function() {
$('input[type="checkbox"]').not("#master").attr('checked', false); });