This question already has answers here:
Make input section required when both checkboxes are selected
(5 answers)
Closed 3 years ago.
So I haven't been successful with getting this to work properly, but I have gotten the show/hide portion to work on my form.
Here is what I'm trying to achieve:
- When the My transaction data or Information about my device... is checked, make the last checkbox required.
- When BOTH top checkboxes are checked, make the last checkbox required.
Here is my attempt, but it doesn't work:
$(document).ready(function() {
$('#rtd3Transaction').change(function() {
if ($('#rtdConfirm').attr('required')) {
$('#rtdConfirm').removeAttr('required');
}
else {
$('#rtdConfirm').attr('required','required');
}
});
$('#rtd3Device').change(function() {
if ($('#rtdConfirm').attr('required')) {
$('#rtdConfirm').removeAttr('required');
}
else {
$('#rtdConfirm').attr('required','required');
}
});
$('#rtd3Transaction, #rtd3Device').change(function() {
if ($('#rtd3Transaction').checked && $('#rtd3Transaction').checked) {
$('#rtdConfirm').attr('required','required');
}
else {
$('#rtdConfirm').removeAttr('required');
}
}); });
Code:
<div id='form-wrapper-certain'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<i>You must specify the personal information you would like us to delete:</i>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][checked][]" value="transaction">
<label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][checked][]" value="device">
<label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
</div>
</div>
</div>
<div id='form-wrapper-certain-selection'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Confirm" name="rtd[3][confirm]" value="yes">
<label class="custom-control-label" for="rtd3Confirm">I confirm that I would like not to sell your personal information to third parties.</label>
</div>
</div>
</div>
</div>
</div>
On click event of #rtd3Transaction, #rtd3Device check is if one or both check box is checked than add required. if required is already added than avoid to add it.and if both check box is not checked than remove checked from third one.
check required already added using !$('#rtd3Confirm').prop('required')
$(document).ready(function() {
$('#rtd3Transaction, #rtd3Device').click(function() {
if ($('#rtd3Transaction').prop('checked')==true || $('#rtd3Device').prop('checked')==true) {
if(!$('#rtd3Confirm').prop('required')){
$('#rtd3Confirm').attr('required','required');
}
}else if($('#rtd3Transaction').prop('checked') != true && $('#rtd3Transaction').prop('checked')!=true) {
$('#rtd3Confirm').removeAttr('required');
}
}); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form-wrapper-certain'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<i>You must specify the personal information you would like us to delete:</i>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][checked][]" value="transaction">
<label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][checked][]" value="device">
<label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
</div>
</div>
</div>
<div id='form-wrapper-certain-selection'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Confirm" name="rtd[3][confirm]" value="yes">
<label class="custom-control-label" for="rtd3Confirm">I confirm that I would like not to sell your personal information to third parties.</label>
</div>
</div>
</div>
</div>
</div>
You are over thinking (and over coding). You do not need to check if both checkboxes are checked if checking either one is enough. So remove the first two change() methods and modify the last one to check the statuses of 2 checkboxes and decide the requirement.
$('#rtd3Transaction, #rtd3Device').on('change', function() {
if ($('#rtd3Transaction').prop('checked') == true ||
$('#rtd3Device').prop('checked') == true)
{
$('#rtdConfirm').attr('required','required');
}
else {
$('#rtdConfirm').removeAttr('required');
}
});
Note we use .prop('checked') to see if a checkbox is checked or not.
Why not use the || operator instead of &&? This would require the last checkbox if either of the first two (or both) are checked:
$('#rtd3Transaction, #rtd3Device').change(function() {
if ($('#rtd3Transaction').checked || $('#rtdDevice').checked) {
$('#rtdConfirm').attr('required','required');
} else {
$('#rtdConfirm').removeAttr('required');
}
}
And frankly, jQuery might be a bit overkill here (unless you are already using it for other things), so here's a plain modern JS solution:
let rtd3Transaction = document.getElementById("rtd3Transaction");
let rtd3Device = document.getElementById("rtd3Device");
[rtd3Transaction, rtdDevice].forEach(element=>{
element.addEventListener("click", (event)=>{
let rtdConfirm = document.getElementById("rtdConfirm");
if (rtd3Transaction.checked || rtdDevice.checked) {
rtdConfirm.required = "required";
} else {
rtdConfirm.removeAttribute('required');
}
});
});
Related
I have two fields, where there are two items to choose from, two checkboxes. And I'd like when I click the option Yes, it automatically selects Yes in the other checkbox.
For example: when I click Yes here : Guarantee or other security given by custom Single automatically selects Yes here : Guarantee or other security given by customer :
This is my jQuery code, HTML markup and source code :
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/>
<label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" class="checkbox">No</label>
</div>
</div>
</div>
jQuery
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
JSfiddle: https://jsfiddle.net/Palucci92/pouw6q3t/1/
Make sure you imported jQuery. I have just added jQuery tag in your Jsfiddle it's just working fine
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also i have just added some script to the process vice-versa
I have just attaching edited JSfiddle : https://jsfiddle.net/p5thmwab/
It is working.
Possible problem is that you didn't include the Jquery library in your fiddle.
Try out the snippet I made.
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js"></script>
<div class="row gutters">
<div class="col col-2"><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard"
class="checkbox">No</label>
</div>
</div>
</div>
</div>
I have the following code:
JavaScript:
jQuery(".cbChild").on("change", function () {
//go to parent checkbox to see if it's check. If not, check it.
var parentElement = jQuery(this).closest('cbParentContainer');
//I've also tried
//var parentElement = jQuery(this).parentsUntil('cbParentContainer');
//And
//var parentElement = jQuery(this).parentsUntil('row');
if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
parentElement.prop("checked", true);
}
});
HTML:
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.
We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.
$(function(){
$("body").on("change",".cbChild input",function(){
var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input");
p.prop("checked",$(".cbChild input:checked",cc).length>0);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
Context
I'm adding different functionalities to a Google Spreadsheet through Google Scripts. One of these functionalities I'd like to add is for a form to pop up, details to be added in and an email to be sent. The form (see below) is WIP and fields are yet to be fully defined.
UPDATED based on Alessandro's feedback.
New form in HTML following the same principles.
< Script > within HTML updated based on feedback
JS updated based on feedback
Doesn't work yet.
HTML
<p>To add new tasks for a specific campaign setup, please start specifying what project, campaign, platform and phase you want to add tasks for.</p>
<p>PROJECT</p>
<form id="briefForm" onsubmit="handleFormSubmit(this)">
<div class="container">
<div class="row">
<div class="col-6"><!--left side -->
<div class="form-group row">
<label for="fname" class="col-sm-6 col-form-label">Project:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="project">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Platform:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="platform">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="campaign" class="col-sm-6 col-form-label">Campaign:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="campaign">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Phase:</label>
<div class="col-sm-6">
<div class="row">
<div class="col">
<select name="Month" class="custom-select">
<option value="march">None</option>
<option value="january">Awar.</option>
<option value="february">Cons.</option>
<option value="march">Both</option>
</select>
</div>
</div>
</div>
</div>
</div><!--right side -->
</div><!-- form for teacher/student-->
</div>
<p>TASKS</p>
<div class="container">
<p>Select the relevant tasks to add to this project.</p>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Review assets</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Send brief</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Set up</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Quality check</label>
</div>
</div>
<br>
<input type="submit" id="submitbtn" class="btn btn-primary">
</form>
<!-- Script down here -->
<script>
window.closeDia = function() {
var formObject = {
platform: document.getElementById('platform').value,
project: document.getElementById('project').value,
// other form input fields...
}
google.script.run.sendBrief(formObject);
};
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
JS (contains both openBrief and sendBrief)
function openBrief() {
var s=SpreadsheetApp.getActive();
var htmlDlg = HtmlService.createHtmlOutputFromFile('tasksHTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(750)
.setHeight(450);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'New tasks for new campaign setup 📝');
}
function sendBrief(formObject) {
var project = formObject.project;
var platform = formObject.platform;
// and so on...
var s = SpreadsheetApp.getActiveSpreadsheet();
var ss = s.getSheetByName("Support"); // Enter sheet name
var rangeProject = ss.getRange('AA2');
rangeProject.setValue(project)
}
Considerations
You are trying to reference the DOM in a server-side script. This won't be possible. In this case you will have to pass the forms values to the server-side script called by the google.script.run method.
Solution
I see that you are using a click event handler for the submit button. In this case you can update the closeDia function and create a JSON Object with the forms fields values.
To do so pick each element by their id and put their values in a JSON Object, then pass it to the server-side function.
<script>
window.closeDia = function() {
var formObject = {
email: document.getElementById('email').value,
project: document.getElementById('project').value,
// other form input fields...
}
google.script.run.sendBrief(formObject);
};
</script>
Now you can easily parse the JSON you passed to the server-side as follows:
// Server Side: Code.gs
function sendBrief(formObject) {
var project = formObject.project;
var email = formObject.email;
// and so on...
}
Reference
Client-to-Server Communication: Forms
I've been trying to use the jquery parentsUntil method to hide a button until a radio box is selected, but I can't seem to get it to work. It's probably something obvious, but it's been bugging me for a couple of days now. Can anyone see what I'm doing wrong.
(function($) {
$(function(){
$('.last-item').change(function() {
if( $(this).val() != '' ) {
$(this).parentsUntil('.step').find('.button-next').removeClass('hide');
$(this).parentsUntil('.step').find('.button-next').addClass('show');
console.log("changing the last item");
}
});
});
})(jQuery);
.hide {
display: none;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup></label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
JS Fiddle
.parentsUntil() gets "the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector,".
Try .closest() instead
This is likely what you meant?
No need to hide if value is empty since you cannot deselect a radio.
If you want to hide when some value is empty, use .toggle($(this).val()!="")
(function($) {
$(function() {
$('.last-item').on("click",function() { // click assumes radio as last item
$(this).closest("div.step").find('.button-next').show();
});
});
})(jQuery);
.button-next { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup>
</label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
Try this snippet. I hope it will work
Note:remove hide class from -> class="button-next hide"
$(function(){
$('.button-next').hide();
$('input[type="radio"]').click(function() {
if($(this).prop('checked') == true) {
$('.button-next').show();
}
else {
$('.button-next').hide();
}
});
});
All good sensible answers, guys, but none of them worked for me. In the end I had to use
$(this).closest('.step-3').find('.button-next').css('display','block');
title of this question seems to be pretty bad, I am sincerely sorry for that. I just couldn't come up with better phrasing.
I am trying to work on a "webapp" which allows the user to experiment with the logical operators like XOR, NOR and AND on a webpage. I am struggling with the programming though, especially with the NOR operator - which only works, if neither of my two checkboxes are checked.
iif ($("#norA").prop("checked") || $("#norB").prop("checked")) {
$("#nors").html("off");}
{$("#nors").html("on");}
<div class="row" id="options">
<div class="col-md-2"><div class="checkbox">
<label><input type="checkbox" name="nor" id="norA">A</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="nor" id="norB">B</label>
</div></div>
<div class="row" id="result">
<div class="col-md-2"><p id="nors">on</p></div></div> <!--placeholder of the solution/output -->
$(document).ready(function(){
$("[type=checkbox]").change(function(){
if (!($("#norA").is(":checked") && $("#norB").is(":checked"))) { $("#nors").html("on");}
else {$("#nors").html("off");}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="options">
<div class="col-md-2"><div class="checkbox">
<label><input type="checkbox" name="nor" id="norA">A</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="nor" id="norB">B</label>
</div></div>
<div class="row" id="result">
<div class="col-md-2"><p id="nors">on</p></div></div>
if($("#norA").is(":checked") && $("#norB").is(":checked")){
$("#nors").html("off");
}
else{
$("#nors").html("on");
}
This code will handle the input and select the correct nor condition. Note that by separating the functional code from the event handler, you can also use it to set the initial condition, which this does.
$(document).ready(function() {
$("input:checkbox").change(function() {
toggleNors();
});
toggleNors();
})
function toggleNors() {
var nor = !$("#norA").is(":checked") && !$("#norB").is(":checked")
$("#nors").text(nor ? "on" : "off");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="options">
<div class="col-md-2"><div class="checkbox">
<label><input type="checkbox" name="nor" id="norA">A</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="nor" id="norB">B</label>
</div>
</div>
<div class="row" id="result">
<div class="col-md-2">
<p id="nors">on</p>
</div>
</div>
The nor truth table is true if, and only if, neither a nor b are checked, and that's how this is implemented.