according to this article
calling the same function when any radio button or checkbox are clicked
I can call the function anytime radiobutton's are checked.
<script type="text/javascript">
$("input.calc").change(function() {
calcPrice();
});
function calcPrice(){
console.log('checked!!'); // note that you missed the quotes here
}
</script>
<input class="calc" type="radio" name="android" value="1">smart
<input class="calc" type="radio" name="android" value="2">tablet
<input class="calc" type="radio" name="android" value="3">both
<input class="calc" type=checkbox name="func" value="0">push
<input class="calc" type=checkbox name="func" value="0">distribute
<input class="calc" type=checkbox name="func" value="0">internationalization
But now I can't add class 'calc' for each rows,
but I can add 'calc' on the wrapper div.
(it is because of formbuilder of symfony2)
now my code is this.
<div class="calc">
<input type="radio" name="android" value="1">smart
<input type="radio" name="android" value="2">tablet
<input type="radio" name="android" value="3">both
</div>
<div class="calc">
<input type=checkbox name="func" value="0">push
<input type=checkbox name="func" value="0">distribute
<input type=checkbox name="func" value="0">internationalization
</div>
Is it possible to get the when any buttons are clicked ,same as before?
Try this,
$(".calc input[type='radio'], .calc input[type='checkbox'] ").change(function() {
calcPrice();
});
You can use
$(".calc :radio, .calc :checkbox").change(calcPrice);
The following code will fire whenever a radio input changes (such as when clicked). You could easily change this to reference all inputs instead of just radio boxes, by using input instead of input[type="radio"].
You can access the individual checked status of the input using this.checked
$('.calc').on('change', 'input[type="radio"]', function(event) {
if(this.checked) {
// Input is currently checked.
}
});
$(".calc :radio, .calc :checkbox").change(function() {
calcPrice();
});
function calcPrice(){
console.log('checked!!'); // note that you missed the quotes here
}
Please check this jsfiddle Click here
Related
<script>$(function(){
$('#admin_permission_check').on('change',function(){
$('.admin_permission_check').prop('checked',$(this).prop('checked'));
});
$('.admin_permission_check').on('change',function(){
$('#admin_permission_check').prop('checked',$('.admin_permission_check:checked').length ? true: false);
});
});</script>
<input type=checkbox id='admin_permission_check' value="1" /> Select All
<input type=checkbox class='admin_permission_check' value="2" />
<input type=checkbox class='admin_permission_check' value="2" />
This is working fine and i am able to check all check boxes with class admin_permission_check when checkbox with id admin_permission_check is being checked.
But when i have unchecked any checkbox with class admin_permission_check then the checkbox with id admin_permission_check is not being unchecked automatically and what should i do to if all the checkboxes with class admin_permission_check are checked already on pageload then the checkbox with id admin_permission_check automatically gets checked.
I don't know about Javascript but searching helped me to achieve the code above which is working but not as expected.
You can use :not() selector to see if one of the checkboxes is not checked and after this you can adjust the checked property of the first one with id. The same function can be called on document ready to set the checked attribute of "Select All" checkbox if other checkboxes are checked. See the snippet below (I've put the initialization into setCheckBoxUpHandlers method to allow passing the id/class name for some different test cases).
$(document).ready(function(){
setCheckBoxUpHandlers('admin_permission_check');
setCheckBoxUpHandlers('admin_permission_check1');
setCheckBoxUpHandlers('admin_permission_check2');
});
function setCheckBoxUpHandlers(name){
$('#' + name).on('change',function(){
$('.' + name).prop('checked', $(this).prop('checked'));
});
function checkIfAllAreChecked(){
$('#'+ name).prop('checked', $('.' + name + ':not(:checked)').length ? false: true);
}
checkIfAllAreChecked();
$('.' + name).on('change',function(){
checkIfAllAreChecked();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox id='admin_permission_check' value="1" /> Select All
<input type=checkbox class='admin_permission_check' value="2" />
<input type=checkbox class='admin_permission_check' value="2" />
<br/>
<span>-------------------------------------------------------------------</span>
<br/>
<input type=checkbox id='admin_permission_check1' value="3" /> Select All
<input type=checkbox class='admin_permission_check1' value="4" />
<input type=checkbox class='admin_permission_check1' value="4" checked/>
<input type=checkbox class='admin_permission_check1' value="4" />
<br/>
<span>-------------------------------------------------------------------</span>
<br/>
<input type=checkbox id='admin_permission_check2' value="5" /> Select All
<input type=checkbox class='admin_permission_check2' value="6" checked/>
<input type=checkbox class='admin_permission_check2' value="6" checked/>
I have some radio button and checkboxs like
<script type="text/javascript">
function calcPrice(){
console.log(checked!!);
}
</script>
<input type="radio" name="android" value="1">smart
<input type="radio" name="android" value="2">tablet
<input type="radio" name="android" value="3">both
<input type=checkbox name="func" value="0">push
<input type=checkbox name="func" value="0">distribute
<input type=checkbox name="func" value="0">internationalization
I would like to call the calcPrice anytime when radio button or checkbox clicked.
I am using jquery and I know how to call when certain button is clicked.
$("input[name='android']").change(function()
But I would like to call the same function when 'any' button are clicked.
How can I make it ?
Since you may have other input elements in the page, just use a class name to identify them. In my example, I used the class name calc so you can use it to define an on change event.
<script type="text/javascript">
function calcPrice(){
console.log('checked!!'); // note that you missed the quotes here
}
</script>
<input class="calc" type="radio" name="android" value="1">smart
<input class="calc" type="radio" name="android" value="2">tablet
<input class="calc" type="radio" name="android" value="3">both
<input class="calc" type=checkbox name="func" value="0">push
<input class="calc" type=checkbox name="func" value="0">distribute
<input class="calc" type=checkbox name="func" value="0">internationalization
For your JavaScript:
$("input.calc").change(function() {
calcPrice();
});
But I would like to call the same function when 'any' button are
clicked.
You can use Multiple Selector (“selector1, selector2, selectorN”) and add :button selector in existing selector.
$("input[name='android'], input[name='func'], :button").change(function()
An equivalent selector to $( ":button" ) using valid CSS is $(
"button, input[type='button']" ).
Try this,
$("input[name='android'], input[name='func']").change(function(){
});
you can use this
function calcPrice(){
console.log("checked!!");
}
$("input[name='android'],input[name='func']").change(function()
{
calcPrice() ;
});
I need to update a hidden field based on user selected button
Code:
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
Javascript code:
$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
// I need to write code here to update the hidden field 'selectedBank' based on user selected bank radio button
}
Description
Give your radio buttons a value then you can use jQuery's change() and val() methods.
jQuery.change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
jQuery.val() Get the current value of the first element in the set of matched elements.
Check out my sample and this jsFiddle Demonstration
Sample
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
$("input[type='radio'][name='bankRadioButtons']").change(function(event) {
$("input[type='hidden'][name='selectedBank']").val($(this).val());
});
More Information
jQuery.change()
jQuery.val()
Update
The following would will in better performance. Use class and the id attribute in html.
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" class="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" id="selectedBank" value="" />
$(".bankRadioButtons").change(function(event) {
$("#selectedBank").val($(this).val());
});
Updated jsFiddle
You can do:
$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
switch(this.id)
{
case "Bank1" : $("#selectedBank").val("Bank1");
break; // and then case "Bank2" etc.
}
}
Try this:
var value = $("input[#name=bankRadioButtons]:checked").val();
$("input[#name=selectedBank]").val(value);
Good-Luck !
New to jquery question...
Using jQuery, depending on the radio button clicked I would like jQuery auto 'check' the corresponding checkbox.
<input type="radio" value="#ID#" name="#ID#1"
onclick="return tickSession(this);"/>
<input type="checkbox" value="#ID#" id="#ID#"
name="sessionsThatNeedBookingOnto" class="#ID#1"/>
<input type="radio" value="#ID#" name="#ID#1"
onclick="return tickSession(this);"/>
<input type="checkbox" value="#ID#" id="#ID#"
name="sessionsThatNeedBookingOnto" class="#ID#1"/>
<input type="radio" value="#ID#" name="#ID#2"
onclick="return tickSession(this);"/>
<input type="checkbox" value="#ID#" id="#ID#"
name="sessionsThatNeedBookingOnto" class="#ID#2"/>
This is what I have tried but my understanding is a little off...
<script>
function tickSession(elementHere){
alert($(elementHere).val());
$(elementHere).attr('id').attr("checked", "true");
$($(elementHere).val()).attr('checked','checked')
}
</script>
<script>
$(document).ready(function(){
$('input:radio').click(function(){
$(this).next('checkbox').attr('checked',true);
});
});
</script>
Let's rework your checkboxes/radios:
<input type="radio" value="#ID#" name="rd1" class='rd-session-control'/>
<input type="checkbox" value="#ID#" id="for-rd1"
name="sessionsThatNeedBookingOnto" class="#ID#1"/>
Now:
$(function() {
$('.rd-session-control').click(function() {
var checkbox = $('#for-' + $(this).attr('id'));
if (checkbox.is(':checked'))
checkbox.removeAttr('checked');
else
checkbox.attr('checked', 'checked');
});
});
What this does is:
Allow you to set all of the click handlers for the radios at once using a class rd-session-control.
The ID attribute for the checkboxes is sane and easily calculated relative to the radio that controls them.
Uses the :checked selector to test if the checkbox is active or not.
I want replace a p tag value if a radio is checked.
I write some JS to do this,but nothing changed.
this is my code(I use jquery)
<script>
$(function(){
if ($('#A:checked')) {
$("#change_me").html('<input type="radio" value="1" name="fruit">')
}
if ($('#B:checked')) {
$("#change_me").html('<input type="radio" value="2" name="fruit">')
}
}
</script>
<input type="radio" name="e" id="A" checked="checked">
<input type="radio" name="e" id="B">
<p id="change_me">
<input type="radio" value="1" name="fruit">
</p>
Thanks.
The :checked selector matches elements that are currently checked.
Writing $('#B:checked') returns a jQuery object containing either zero or one element. It cannot be used directly as a condition.
Instead, you can check if ($('#B:checked').length) to see whether the jQuery object has anything in it.
First, you don't need to recreate the radio button if only the value is changing.
$(function(){
if ($('#A:checked').size() > 0) {
$("#change_me input[type=radio]").val('1')
}
if ($('#B:checked').size() > 0) {
$("#change_me input[type=radio]").val('2')
}
}
HTML:
<input type="radio" name="e" id="A" checked="checked">
<input type="radio" name="e" id="B">
<p id="change_me">
<input type="radio" value="1" name="fruit">
</p>
Replace the JavaScript code you have with the following
$(function(){
$('input[name=e]').change(function(){
if($(this).attr('id') == 'A')
{
$("#change_me input").val('1');
}
else
{
$("#change_me input").val('2');
}
});
});