This is my html:
<div class="form-item">
<label>Disability: </label>
<div class="form-radios student_course_disablity">
<div class="form-item" id="edit-student-course-disability-not-stated-wrapper">
<label class="option" for="edit-student-course-disability-not-stated">
<input type="radio" id="edit-student-course-disability-not-stated" name="student[course][disability]" value="not_stated" checked="checked" class="form-radio student_course_disablity"> Not Stated</label>
</div>
<div class="form-item" id="edit-student-course-disability-yes-wrapper">
<label class="option" for="edit-student-course-disability-yes">
<input type="radio" id="edit-student-course-disability-yes" name="student[course][disability]" value="yes" class="form-radio student_course_disablity"> Yes</label>
</div>
<div class="form-item" id="edit-student-course-disability-no-wrapper">
<label class="option" for="edit-student-course-disability-no">
<input type="radio" id="edit-student-course-disability-no" name="student[course][disability]" value="no" class="form-radio student_course_disablity"> No</label>
</div>
</div>
I want to run onchange event for this radio button:
I've tried this method:
$('input[type=radio][name=student[course][disability]]').change(function() {
alert('hi');
});
But no luck
Put name in double quote like below. Hope this will help.
$('input[type=radio][name="student[course][disability]"]').change(function () {
alert('hi');
});
It is better you group by the class rather than using name selector, that too without " quotes. You might want to use: 'input[name="student[course][disability]"]'.
$('input.student-course-disability').on("change click", function() {
alert('hi');
});
Add click event too, just in case. Don't forget to give the class to the <input /> elements.
I have already given you the best solution, but for your updated solution:
$('input[name="student[course][disability]"]').change(function () {
alert('hi');
});
Related
If Field 1 is checked "Yes" then Field 2 should be checked "Yes"
This is what I've been trying so far:
Field 1:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field1" id="Question15yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field1" value="No" onclick="Check()">No</div>
Field 2:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field2" id="Question16yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field2" value="No" onclick="Check()">No</div>
I was trying something as simple as this js below, but I'm definitely missing something. Any help would be greatly appreciated!
<script language="JavaScript">
function Check() {
$("#Question15yes").click(function(){
if ($(this).is(':checked'))
{
$("#Question16yes").val("Yes");
}
}
});
}
</script>
Make sure you are including JQuery in your page.
To bind your event, you need to wait that the DOM is fully loaded, else you would try to use an element that doesn't exist yet.
<script language="JavaScript">
$(function() {
$(".question-checkbox").click(function(){
if ($(this).is(':checked'))
{
console.log($(this));
}
});
});
</script>
Also, you might want to change the JQuery selector from ID to class, so that you can use the same code for all similar checkboxes.
Put a .question-checkbox class on the inputs, and remove all onclicks.
You don't have to call check on every click. Once document loads, call it once.
window.addEventListener("load", function(){
$("input[type='radio']").on("click", function(){
if($("#Question15yes").is(':checked'))
$("#Question16yes").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field1" id="Question15yes" value="Yes">
Yes
<input type="radio" name="Field1" value="No" >No
</div>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field2" id="Question16yes" value="Yes">
Yes
<input type="radio" name="Field2" value="No">
No
</div>
Use this for a single checkbox with the class name "example":
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
How can I find which radio button is selected after a precise div?
This is an Example:
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?
Thanks in advance.
If there is just bunch of radio button you would like to check are checked or not you can do something like this
$(document).ready(function(){
$('.delete').on('click', function(){
$(document).find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:
$(document).ready(function(){
$('.delete').on('click', function(){
var $parent = $(this).parents('.largelines');
$parent.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
There is bunch of other ways to do that, another one is using next() or siblings() function:
$(document).ready(function(){
$('.delete').on('click', function(){
var $fieldset= $(this).next('fieldset');
//var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
$fieldset.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
This find only checked radio under .largelines scope of clicked .delete element.
$(function () {
$(document).on('click', '.delete', function () {
var isChecked = $('input:radio:checked', $(this).parent()).length > 0
alert(isChecked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
Check 1
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
<hr>
<div class="largelines">
<p class="line">OPTION 2</p>
<div class="delete">
Check 2
</div>
<fieldset>
<input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});
You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()
You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>
Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.
You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>
I am having an issue I am not able to resolve despite through research and effort. So I am posting it here. I have two input radio button elements with the same name
, which represent Business Bank Account Service being used or not:
<input type="radio" name="bank_account_service" value="no" checked='checked'>No
<input type="radio" name="bank_account_service" value="yes">Yes
Now I also have the following JQuery function which should alert the value of this radio selection:
var bank=$('input[name=bank_account_service]:checked').val();
$(document).click(function(){alert(bank);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business Bank Account<br/>
<br/><input type="radio" name="bank_account_service" value="no" checked='checked'>No
<br/><input type="radio" name="bank_account_service" value="yes">Yes<br/><br/>
I want to alert yes when the radio button for Yes is checked. Can anyone guide me as to what am I missing or doing wrong please?
You might be looking for this:
$('input[name=bank_account_service]').click(function () {
alert($('input[name=bank_account_service]:checked', '#yourForm').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business Bank Account<br/>
<form id="yourForm">
<br/><input type="radio" name="bank_account_service" value="no" checked='checked'>No
<br/><input type="radio" name="bank_account_service" value="yes">Yes<br/><br/>
</form>
Looks like you've got some of your jquery backwards.
Try this:
//all click events go in here
$(document).ready(function(){
//click event on all of these bank inputs
$('input[name=bank_account_service]').click(function(){
//check to see if this is the yes option
if ($(this).val()=='yes') {
//do something
}
});
});
You might also want to consider putting unique IDs for each of your radio buttons. So if you could change your HTML to this:
<input type="radio" name="bank_account_service" value="no" id='bank_no'>No
<input type="radio" name="bank_account_service" value="yes" id='bank_yes'>Yes
Then you could make your jquery:
$(document).ready(function(){
//click event on only the yes input
$('#bank_yes').click(function(){
//do something
});
});
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>
<script>
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input[name='fruit']:checked" ).val() + " is checked!" );
});
</script>
Try something like this !!!
I have a script which greys out a text area whenever the yes radio button is selected. I would like to modify the jquery script so that the textarea can be in a different div and still be disabled as before.
Looking through the jquery docs it looks to me I can do this using .parent but I'm having trouble getting it to work.
<div class="group">
<input type="radio" name="choice2" value="yes" />Yes
<input type="radio" name="choice2" value="no" />No
</div>
<div class="group">
<textarea rows="4" cols="20"></textarea>
</div>
How can I do this? Or is there a better way?
Edit:
$(function () {
var $choices = $(".group").find(":radio");
$choices.on("change", function () {
var $this = $(this);
var tarea = $this.closest(".group").next(".group").find("textarea");
if ($this.val() === "yes") {
tarea.val('');
tarea.prop('readonly', true);
tarea.css('background-color', '#EBEBE4');
} else {
tarea.prop('readonly', false);
tarea.css('background-color', '#FFFFFF');
}
});
});
Added to each <textarea> the attribute "trigger". Determinates it's trigger element by name. For example <textarea data-trigger="choice2"> means <input name="choice2"/> change's it's stare (gray/or not).
This way you can add your textarea elements anywhere inside your page without worries.
Here is an example: http://jsfiddle.net/r0gw8t1b/2/
var tarea = $this.closest(".group").next(".group").find("textarea");
You can use next() to achieve that. It finds the parent group and then looks at immediate sibling and looks for textarea.
<div class="group">
<input type="radio" name="choice1" value="yes" />Yes
<input type="radio" name="choice1" value="no" />No
</div>
<div class="group">
<textarea rows="4" cols="20"></textarea>
</div>
DEMO
This jsFiddle shows how it could be done.
$($(this).parent().siblings('div.group')[0]).find('textarea');
Find the text area inside the parents siblings of type div.group, and then you can set the css or whichever attributes you want to set as seen in the jsFiddle.
The below code works well for the selection and disabling the desired text area:
HTML:
<div class="group">
<input type="radio" name="choice2" value="yes" />Yes
<input type="radio" name="choice2" value="no" />No
</div>
<div class="group">
<textarea rows="4" cols="20"></textarea>
</div>
JQUERY:
$(function () {
$( "input[type='radio']" ).click(function () {
if ($(this).val()=='yes') {
$('.group textarea').attr('readonly',true);
$('.group textarea').css('background-color', '#f1f1f1');
} else {
$('.group textarea').attr('readonly',false);
$('.group textarea').css('background-color', '#fff');
}
});
});