I have the following form:
<div class="form-radios">
<!-- OPTION #1 -->
<div class="form-item form-type-radio">
<input type="radio" name="auswahl_radio" id="option1" class="form-radio"> <label class="option" for="option1">Option 1</label>
<div class="radio-supplement">
<p>Please accept:</p>
<input type="checkbox" id="checkbox_1" value="beer"><a href="#">Checkbox 1</a>
<input type="checkbox" id="checkbox_2" value="wine"><a href="#">Checkbox 2</a>
</div>
</div>
<!-- OPTION #2 -->
<div class="form-item form-type-radio">
<input type="radio" name="auswahl_radio" id="option2" class="form-radio"> <label class="option" for="option2">Option 2 </label>
</div>
<!-- OPTION #3 -->
<div class="form-item form-type-radio">
<input type="radio" name="auswahl_radio" id="option3" class="form-radio"> <label class="option" for="option3">Option 3</label>
</div>
</div>
What I want to achieve is that when the user clicks the submit-button and checked OPTION #1, then my script shall check if both checkboxes in the containing div.radio-supplement are checked. If not at least one of them is checked, the form must not be sent.
Here is the relevant jQuery script I came up with but doesn't work:
var checkbox_1 = $('#checkbox_1').prop('checked');
var checkbox_2 = $('#checkbox_2').prop('checked');
if ($("#option1").is(':checked')) {
if ( (checkbox_1 == true) && (checkbox_2 == true) ) {
return true;
} else {
$('.messages_error').html('At option1 please check both checkboxes');
window.scrollTo(0,0);
return false;
};
};
Does anyone of you see the error?
Try with this:
var radios = jQuery("input[name='auswahl_radio']");
var radio_is_checked = radios.filter(":checked") ;
THEN check for this radio_is_checked variable.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.