Get the certain radio button - javascript

have 5 radio button(yes or no) and I want to do is whenever I select 'Yes' either those buttons my textarea will color red, and I've already done that. but the problem is whenever I've select only one 'Yes' and change it to No the color of the textarea still remains on red
$('.com_lease_checkbox').on("change", function() {
console.log($(this).val());
$(".com_lease_checkbox:checked").each(function(){
// Check if the value is Yes
if ($(this).is(':checked') && $(this).val() == 'Yes') {
// Set the color of text-area
$('.com_lease_desc_a').css("border-color","red");
}
});
});

Simple way to do this is to Count How many selected 'No's .. if it's Zero it's OK else Red
$('.com_lease_checkbox').on("change", function() {
//var selectedYesCheckBoxesCount = $(".com_lease_checkbox[value='Yes']:selected").length;
var selectedNoCheckBoxesCount = $(".com_lease_checkbox[value='No']:selected").length;
if(selectedNoCheckBoxesCount > 0) {
$('.com_lease_desc_a').css("border-color","red");
}
else {
$('.com_lease_desc_a').css("border-color","green");
}
});

Related

How to show all list items again that were previously hidden by jQuery?

I have a search box that filters results and hides them if they don't match the filter:
$('#box_street').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#street__list > .list__item').show();
} else {
$('#street__list > .list__item').each(function() {
var text = ($(this).text() + $(this).data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show()
} else {
$(this).hide();
}
});
};
});
Now, I added a function that clear the search box with $('.search__filter').val(''); The problem is, once that runs the items that were previously hidden don't show again. The form input resets ok, but the items are still hidden.
How can I show them all again?
Once the search input is empty, all you have to do is trigger the keyup event, as you already have a condition that shows all the elements
$('#reset_button').on('click', function() {
$('.search__filter').val('');
// reset form ... then
$('#box_street').trigger('keyup');
// or you could do it yourself directly with :
// $('#street__list > .list__item').show();
});

Jquery - Identify if radio button value has not changed

Is it possible to identify if the value of radio button has not changed?
Currently I am trying to change the confirmation message of submit button on button changed, and do not want any message if the value has not changed. I have something like this now:
$('input[type="radio"]').change(function() {
var selected = $('input:checked[type="radio"]').val();
if(selected == 'true') {
$("#submit_button").data("confirm", "foo");
} else if(selected == 'false') {
$('#fee').hide();
$("#submit_button").data("confirm", "bar");
}
This will change confirm message to foo if button selected is true, and bar if button selected is false. However, what if I want to return nothing (no message), if radio button by default is true, and selected is true?
You can start a variable outside the event:
var radioChanged = 0;
And, in your event increase it:
$(':radio').change(function() {
radioChanged += 1;
// your code ...
});
Then, later on:
if (radioChanged > 0) {
alert('Change function occurred ' + radioChanged + ' times.');
} else {
alert('Radio button not changed.');
}
As i understand your expected behaviour, check if any radio has no more its default checked value:
$('form').on('submit', function() {
var anyRadioChanged = !!$(this).find('input[type="radio"]').filter(function() {
return $(this).is(':checked') != this.defaultChecked;
}).length; // '!!' to get boolean but it doesn't really matter here
if(anyRadioChanged) {
// show message(???)
}
})
you can hide message element just adding display: none to it or use jquery hide method
$('#someElementId').hide();
or
$('#someElementId').css("display","none")

Checkbox to trigger input, and vice versa

I am currently working on a form, and am required to do the following:
If the checkbox next to the input field (in this case, a qty field) is checked, then set the input to "1". If the qty field is greater than one, then the checkbox remains checked.
If the checkbox is unchecked, then the qty field is reset to 0. Alternatively, if the user inputs 0 into the qty field, then the checkbox is also unchecked
Problems
The increase button currently requires two clicks to increment the qty
When the qty field has a number > 0, and is then decreased to 0, the increase button no longer works.
Can anyone spot the error in my ways?
jQuery('.exhibitorBooking--table .desc input[type="checkbox"]').on('change', function(){
if(this.checked){
jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('1');
} else {
jQuery(this).parents('tr').find('.qty-field input[type="text"]').val('0');
}
});
jQuery('.exhibitorBooking--table .qty-field input[type="text"]').on('change', function(){
if(jQuery(this).val() == 0){
jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', false);
} else if(jQuery(this).val() == 1) {
jQuery(this).parents('tr').find('input[type="checkbox"]').trigger('change').attr('checked', true);
} else {
jQuery(this).parents('tr').find('input[type="checkbox"]').attr('checked', true);
}
});
JSFiddle
jQuery(document).ready(function() {
$('#chkStand-1-1').on('change', function() {
var value = $(this).is(':checked') ? 1 : 0;
$('.input-text').val(value);
});
$('.input-text').on('keyup', function() {
$('#chkStand-1-1').prop('checked', (parseInt($(this).val(), 10) > 0));
});
});
Demo: https://jsfiddle.net/tusharj/01s04dw4/1/

jQuery problems with function

What i'm trying to do here is if the selection is equal to value 10 the click function to be available only if selection is equal to 10. But when i change to other ex. category with different value the radio click function is still available. ?
I have 6 radio boxes with value 1,2,3,4,5,6 so what i want to do if value == 4 to slidedown another div while i'm in category with value 10.(selection).
How can i fix this problem ? Here is my sample code.
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
if(selection == '10'){
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown'+selection).slideUp();
} else {
$('#slidedown'+selection).slideDown();
}
});
});
Thanks, any help will be appreciated.
EDIT : I want to slideUp the currect div which is slided down by the category value if radio box with value 4 is checked.
You should have another selection var inside the click callback:
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
});
$("input:radio[name='checkbox']").click(function() {
var selection = $('#category').val(); //This does the trick
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Also, callbacks must be separated for not binding a new listener each time
Hope this helps. Cheers
Use the disabled property to enable and disable the radio buttons.
$('#category').change(function() {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
$('input:radio[name=checkbox]').prop('disabled', selection != '10');
});
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Your code is adding a handler when the select has the correct value, but it never removes the handler when the select changes to a different value. Also, every time they select 10 it was adding another handler, so the handler would then run multiple times.

How to enable submit button if at least two checkboxes are checked?

With the help of answers I found here, I try to disable submit button and send an alert message when clicked on it until there's not at least 2 checkboxes checked.
What I am doing wrong ?
var selected = $('#frmCompare :checkbox:checked').length;
function verifCompare() {
if (selected >= 2) {
//good
$('#frmCompare').submit();
} else {
//bad
alert('Veuillez selectionner au moins 2 produits à comparer...');
return false
}
}
$(document).ready(function () {
$('#btnCompare').attr('disabled', 'disabled');
$('#frmCompare :checkbox').change(function () {
//alert(selected);
if (selected >= 2) {
$('#btnCompare').attr('enabled');
}
});
});
At this point, only alert message works.
Fiddle
EDIT : added fiddle
There is no enabled attribute in HTML.
$('#btnCompare').prop('disabled', selected < 2);
You also need to recalculate the value of selected at every change, you can't just go with what it was set to at page load.
You initialize the count of checked checkboxes just once, when your script is first parsed. The count will not be recomputed later. This line:
var selected = $('#frmCompare :checkbox:checked').length;
should be inside the verification function, not outside.
You should change your code as
$('#frmCompare :checkbox').change(function(){
//update selected variable
selected = $('#frmCompare :checkbox:checked').length
if (selected >= 2) {
$('#btnCompare').attr('enabled');
}
});

Categories

Resources