We Keep Coding

How will I make an If College is Check then this Course would be in the dropdown?

So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>

//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})

I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>

How to restrict multiple inputs with checkbox?

I have a form with 6 inputs, the inputs are grouped by two and I enable/disable them using a checkbox like in this fiddle.
How do I restrict the search? For example, I need to let the user know they need to fill both inputs if they select the check1 checkbox, or if they selected checkboxes check1 and check2 that they need to fill all 4 inputs. Right now I have this:
if( (check1.checked || check2.checked || check3.checked) ){
if($scope.tolPositivaDim1 == '' || $scope.tolNegativaDim1 == '' ||
$scope.tolPositivaDim2 == '' || $scope.tolNegativaDim2 == '' ||
$scope.tolPositivaDim3 == '' || $scope.tolNegativaDim3 == ''){
console.log(''Need to fill all inputs);
} else
console.log('Something');
} else {
console.log('Need to check at least one');
}
But with this it doesn't let me search until I have filled the six inputs. Is there a way to do this without having to do an if for each specific case?:
if(check1.checked) || if(check1.checked && check2.checked).....

You could improve the code to work with any number of such checkbox & double input combinations. Then define a handler for the form's submit event, and check that inputs are not empty when they are not disabled. If one of those is empty return false, so to cancel the submission.
Some of the code below uses ES6 features. If you cannot use those, it should not be hard to translate the idea to ES5:
var checks = [...document.querySelectorAll('[id^=checkDimension]')],
positivaDims = [...document.querySelectorAll('[id^=tolPositivaDim')],
negativaDims = [...document.querySelectorAll('[id^=tolNegativaDim')];
checks.forEach(function (check, i) {
check.onchange = function() {
positivaDims[i].disabled = !checks[i].checked;
negativaDims[i].disabled = !checks[i].checked;
}.bind(i);
// call the above code also on page load, so to initialise the disabled
// properties correctly:
check.onchange();
});
document.forms[0].onsubmit = function (e) {
if (positivaDims.concat(negativaDims).some(function (input) {
// if for any non-disabled input the value is blank...
return !input.disabled && input.value == '';
})) {
alert('All inputs are required.');
// cancel form submission (either of the two methods below will do it)
e.preventDefault();
return false;
}
}
<form class="" method="post">
<div class="form-group col-sm-12">
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" id="checkDimension1"> Dimension 1</label>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolPositivaDim1" placeholder="0.03" ng-model="tolPositivaDim1">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolNegativaDim1" placeholder="0.03" ng-model="tolNegativaDim1">
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" id="checkDimension2"> Dimension 2</label>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolPositivaDim2" placeholder="0.03" ng-model="tolPositivaDim2">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolNegativaDim2" placeholder="0.03" ng-model="tolNegativaDim2">
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" id="checkDimension3"> Dimension 3</label>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolPositivaDim3" placeholder="0.03" ng-model="tolPositivaDim3">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolNegativaDim3" placeholder="0.03" ng-model="tolNegativaDim3">
</div>
</div>
<button type="submit" class="btn btn-default pull-right" >Search</button>
<button class="btn btn-default pull-right">Cancel</button>
</form>
The same is also available in this fiddle.

Hide a div after selecting a radio

I am working on the following codes where I want the input number to appear only when the radio Mobile Money is selected.
Script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$('#mobilemoneynumber').show();
} else {
$('#mobilemoneynumber').hide();
}
});
});
Html:
<form class="form-basic" method="post" action="#">
<div class="form-row">
<label><span>Select one</span></label>
<div class="form-radio-buttons">
<div>
<label>
<input type="radio" name="radio" id="mobilemoney">
<span>Mobile Money</span>
</label>
</div>
<div>
<label>
<input type="radio" name="radio">
<span>Cash on delivery</span>
</label>
</div>
</div>
</div>
<div class="form-row">
<label>
<span>Number</span>
<input type="text" id="mobilemoneynumber" name="mobilemoneynumber">
</label>
</div>
<div class="form-row">
<button type="submit">Submit Form</button>
</div>
</form>
By default when the page is displayed only the input number is displayed and I want it to be displayed by default.
How can I do that ?

Add value to both radio:
<input type="radio" name="radio" value="mobilemoney">
<input type="radio" name="radio" value="cash">
Jquery:
$('input[type="radio"]').click(function() {
if($(this).val() == 'mobilemoney') {
$('#mobilemoneynumber').show();
}
else {
$('#mobilemoneynumber').hide();
}
});

Radio is wrapped in the element 'form-row'. Which is the previous element of the parent of input element.
$('input[type="radio"]').click(function() {
if ($(this).attr('id') == 'mobilemoney') {
$(this).closest(".form-row").next().show();
} else {
$(this).closest(".form-row").next().hide();
}
});
Fiddle
closest(".form-row") will return the parent element which has the classname form-row

Radio boxes won't validate

I have a series of radio groups, all with the same name because they are dynamically generated. I want them to be required, but nothing I'm doing is making that happen (including trying to count checked items with jquery).
I'm guessing this is due to some sort of ID conflict?
I have the radios marked as "required" in the HTML.
Or could this be due to the way I'm processing with jquery?
<div class="benchmark-question-title"><?php echo $atts['content']; ?></div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>
When I attempt to see if any radio groups with name "yesno" are NOT checked with jquery, it doesn't appear to recognize the groups and counts every option individually.
$('input:radio[name=yesno]').each(function(){
if ( $(this).is(":checked") ){
console.log('checked')
}
else{
console.log('not checked');
}
});
$('input:radio[name=yesno]').each(function() {
if ($(this).is(":checked")) {
console.log('checked')
} else {
console.log('not checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benchmark-question-title">
<?php echo $atts['content']; ?>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>

no need to itterate through, just check the checked state of the group.
$("input:radio[name='yesno']").is(":checked")
or
$("input:radio[name='yesno']:checked").val()
Using JQuery to check if no radio button in a group has been checked

I'm not following what exactly you're trying to accomplish, however if you're looking for the default functionality of only being able to select one radio at a time, you just need to add brackets to the name. Doing this, you also won't have to do any validation if you mark one of the radios as default (as they can't be deselected).
<input type="radio" name="yesno[]" value="yes" />
<input type="radio" name="yesno[]" value="no" checked />

You can use the form to base an event on. Here I used both the change and a validate event - so you can trigger the validate whenever you wish (like on a form submit?) and this shows an example how to do so.
$('form.benchmark-question-binary')
.on("change validate", 'input[type="radio"][name="yesno"]', function(event) {
let thisform = $(event.delegateTarget);
let radios = thisform.find('input[type="radio"][name="yesno"]');
let rChecked = radios.filter(":checked");
console.log(radios.length > rChecked.length);
console.log(radios.length, rChecked.length)
})
// now trigger the first one on startup
.find('input[type="radio"][name="yesno"]').first().trigger('validate');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benchmark-question-title">
Am I the hero?
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>

Multi inputs which user can only enter in one of them

Consider a form which has many inputs, the inputs each has an radio button associated with them. User selects a radio and the associated input will be displayed.
http://jsfiddle.net/0uL6zzja/
If the number of inputs increase (for example 15) we will end up with lots of boilerplate code in js of all radio buttons ( they all do the same thing, disable other inputs, enable my input)
The js is as:
$('#precentRadio').change(function () {
$("#dolorsInput").attr("disabled", true);
$("#precentInput").attr("disabled", false);
})
$('#dolorsRadio').change(function () {
$("#precentInput").attr("disabled", true);
$("#dolorsInput").attr("disabled", false);
})
Are there any way which can can minimize the code ?!

Working demo
Use a class name for the buttons that trigger the inputs to disable/enable, and a class name for the inputs. Disable them all, and enable the one you want by traversing from the clicked button to the closest .input-group then back down to the input field.
jQuery (this is all)
$('.some-button').change(function () {
$('.some-input').prop("disabled", true);
$(this).closest('.input-group').find('.some-input').prop("disabled", false);
})
HTML
Please enter amount in "$" or "%":<p/>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" checked="checked" type="radio" class="some-button">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control some-input" type="text" >
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" type="radio" class="some-button">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">%</span>
<input class="form-control some-input" type="text" disabled>
</div>
</div>
</div>
(repeat)
Also disabled="true" isn't correct, it's not a boolean value in HTML, it's either there or not there, and you should use .prop() not attr() for disabled.

You can add a common class to your radio buttons and attach a single event to all of them. From there you can use DOM traversal to only change the related text input. Something like this:
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" class="input-toggle" checked="checked" type="radio" />
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" />
</div>
</div>
</div>
$('.input-toggle').change(function() {
$('.input-group input[type="text"]').prop('disabled', true); // disable all
$(this).closest('.input-group').find('input[type="text"]').prop('disabled', false);
});
Example fiddle

Sure. The correct way to associate radio buttons with a similar function is to use a common name rather than a class. This makes the radio buttons mutually exclusive (so only one of the options in the group can be active at once).
Then, add the jQuery .change handler not to a single item but to all the radio buttons with that name $('input:radio[name=whatever]').change( ... );.
Inside the function, it is easy to write code which enables the text field directly following the radio button that was clicked, using jQuery's next() method, and disables all other text fields that follow other radio buttons in the group.

If you can't change the HTML, but the ids of the radio buttons and inputs will continue to match (xxxRadio and xxxInput), you can handle things by looking up the id of the selected radio button, and enabling the respective input:
$('input[name=switched]').change(
function() {
var selected = $('input[name=switched]:checked');
var selId = selected.attr('id');
var inpId = '#' + selId.replace(/Radio$/, 'Input');
var activeInput = $(inpId);
$('input.form-control').prop('disabled' ,true);
activeInput.prop('disabled', false);
}
);
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
div.input-group > div.input-group > span.input-group-addon {
border-radius: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Please enter amount in "$" or "%":<p/>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" checked="checked" type="radio" id="dolorsRadio">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" id="dolorsInput">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" type="radio" id="precentRadio">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">%</span>
<input class="form-control" type="text" id="precentInput" disabled="true">
</div>
</div>
</div>