Let me try to explain my problem. I have a radio button "jform[display]" which allow to display a hidden div "greenRect".
With the following code, it does not work.
$("input[name='jform[display]']").on('click', function() {
if ($("input[name='jform[display]']").val() == 1) {
greenRect.show();
alert("Value of the Radio Button="+$("input[name='jform[display]']").val());
return;
}
greenRect.hide();
//It does not work (always=1)!!!
alert("Value of the Radio Button="+$("input[name='jform[display]']").val());
});
The elements $("input[name='jform[display]']").val() is always == 1
If I modify $("input[name='jform[display]']").val() to $(this).val(), it works!
$("input[name='jform[display]']").on('click', function() {
if ($(this).val() == 1) {
greenRect.show();
alert("Value of the Radio Button="+$(this).val());
return;
}
greenRect.hide();
alert("Value of the Radio Button="+$(this).val());
});
Why does it work with the option2 and not with the option1. I thought that both were similar.
Here is the code with JSFIDDLE : http://jsfiddle.net/4zmqzecs/2/
Thank you very much for your help
PS:
The names of my elements are generated by an API:
name=jform[display]
id=jform_test0
id=jform_test1
They sound strange but it's difficult to modify. Anyway it souldn't be the origin of the problem.
You should rather get the value for checked radio button using :checked selector:
$("input[name='jform[display]']:checked").val()
Working Demo
Related
I have a page with a list of check boxes, when a check box is checked I am updating the number of check boxes selected in side a p tag. This is all working.
The problem I have is when the user selects more than 5 checkboxes I want to use Jquery to unselect it.
This is what I have so far, the first if else works but the first part of the if doe
$("input").click(function () {
if ($("input:checked").size() > 5) {
this.attr('checked', false) // Unchecks it
}
else {
$("#numberOfSelectedOptions").html("Selected: " + $("input:checked").size());
}
});
Any ideas?
Firstly you should use the change event when dealing with checkboxes so that it caters for users who navigate via the keyboard only. Secondly, if the number of selected checkboxes is already 5 or greater you can stop the selection of the current checkbox by using preventDefault(). Try this:
$("input").change(function (e) {
var $inputs = $('input:checked');
if ($inputs.length > 5 && this.checked) {
this.checked = false;
e.preventDefault();
} else {
$("#numberOfSelectedOptions").html("Selected: " + $inputs.length);
}
});
Example fiddle
Note I restricted the fiddle to 2 selections so that it's easier to test.
You need this $(this).prop('checked', false);
You should be saying
$(this).attr('checked', false)
instead of
this.attr('checked', false)
You need this $(this).prop('checked', false);
Also this is a javascript object, if you want to use jquery you should prefer $(this).
I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?
Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..
I would like to be able to have an input field (initially hidden and disabled) to be shown and enabled every time the "Other" radio button is selected, and ofcoure to be hidden and disabled when a different radio button is selected . I have gotten this script to show and hide the textfield appropriately, but Id like to know how I can get enabling and disabling to happen with it
$('input[name="x_description"]').bind('change',function(){
var showOrHide = ($(this).val() == "Other") ? true : false;
$('#other_program_text').toggle(showOrHide);
});
I know that this is how to show the field and enable the textfield, but cant figure out how to put it all together,
$(this).show().prop('disabled', false);
Thanks in advance,
Dan
$('input[name="x_description"]').bind('change',function(){
if ( showOrHide == true ) {
$('#other_program_text').show().prop('disabled',false);
} else if ( showOrHide == false ) {
$('#other_program_text').hide().prop('disabled',true);
}
});
You want to use the $(this).attr() function to set properties on an HTML element. With one parameter it'll read the passed param, with two it'll set it.
Like $(this).attr("enabled", true)
You can use "click" method
$('input[name="x_description"]').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
If your content are dynamically generated then use "live" method
$('input[name="x_description"]').live('click',function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); //do your stuff
}
});
I need to trigger some code when I click a checkbox based on if a checkbox is checked or not.
But for some reason, .is(':checked') is always triggered.
This is my code.
jQuery('#selectlist input[type=checkbox]').live('click',function(){
var select_id = jQuery(this).attr('id');
if(jQuery(this).is(':checked')) {
alert('You have unchecked the checkbox');
// Remove some data from variable
} else {
alert('You have checked the checkbox');
//Add data to variable
}
}
UPDATE
I've added an example on JSFiddle: http://jsfiddle.net/HgQUS/
Use change instead of click
$(this).val();
or
$(this).prop('checked'); # on jquery >= 1.6
You will be better at searching over SO:
Get checkbox value in jQuery
How to retrieve checkboxes values in jQuery
Testing if a checkbox is checked with jQuery
this.checked
Should tell you if the checkbox is checked or not although this is just javascript so you won't be able to call it on a 'jquery' element. For example -
<input type="checkbox" id="checky">
$("#checky")[0].checked
If the input has the checked attribute, then it is obviously checked, it is removed if it is not checked.
if ($(this).attr("checked")) {
// return true
}
else {
// return false
}
However, you can adapt the above code to check if the attribute, if it is not removed and instead set to true/false, to the following:
if ($(this).attr("checked") == "true") {
// return true
}
else {
// return false
}
Additionally, I see you use jQuery as an operator for selectors, you can just use the dollar, $, symbol as that is a shortcut.
I flipped-flopped the alerts, and it works for me:
<script type="text/javascript">
jQuery('#selectlist input[type=checkbox]').live('click',function(){
var select_id = jQuery(this).attr('id');
if(jQuery(this).is(':checked')) {
alert('You have checked the checkbox');
// Remove some data from variable
} else {
alert('You have unchecked the checkbox');
//Add data to variable
}
});
</script>
Your "if" syntax is not correct.
jQuery('#selectlist_categories input[type=checkbox]').live('click',function(){
var cat_id = jQuery(this).attr('id');
// if the checkbox is not checked then alert "You have unchecked the checkbox"
if(!jQuery(this).is(':checked')) {
alert('You have unchecked the checkbox');
} else {
//else alert "You have checked the checkbox"
alert('You have checked the checkbox');
}
});
if you're confused about why it says unchecked when you check it. There is nothing wrong with your code you can just switch the unchecked and checked with each other in the alerts like this:
$('#selectlist_categories input[type=checkbox]').on('change',function(){
var cat_id = $(this).attr('id');
let cat_idText = $("input[type=checkbox]:checked").val();
if(jQuery(this).is(':checked')) {
alert('You have checked the checkbox' + " " + `${cat_idText}`);
} else {
alert('You have unchecked the checkbox');
}
});
PS: I have updated the script to work in jQuery 3.5.1 the original with the live() only works on jQuery 1.7 since it was removed in 1.9 to instead use on() and on jQuery 3.5.1 you can use $ instead of jQuery and the val() function works on all versions because it added in jQuery 1.0
Or in a nice better fashion correct the if statement as RickyCheers said adding the ! before jQuery or $ which then the if statement will turn it into a if jQuery Element is not checked
$('#selectlist_categories input[type=checkbox]').on('click',function(){
var cat_id = $(this).attr('id');
if(!jQuery(this).is(':checked')) {
alert('You have unchecked the checkbox');
} else {
alert('You have checked the checkbox');
}
});
I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/