Question

In: Computer Science

This is in HTML and JavaScript So I have 2 radio buttons One called students and...

This is in HTML and JavaScript

So I have 2 radio buttons One called students and one called teacher. If the user selects the student then a list of check boxes these should appear. These should not be visable if the user selects the teacher radio button.

- buy text books

- visit teachers website

- attend class

If the user selects the teacher radio button then all the text boxes above should be hidden From the user. Then these check boxes should be appear.

- payment

- class time

- class list.

But if the user selects the student radio button then the check boxes above should not be visable.

Expert Solution

HTML code:

Code is commented for better understanding

<!DOCTYPE html>
<html>
<head>

#primary{
margin-bottom: 10px;
}
</style>
</head>

<body>

<form>
<fieldset id="primary">
<legend>radio buttons</legend>
<label><input type="radio" name="primary" data-group="#subOptions1"> student</label>
<label><input type="radio" name="primary" data-group="#subOptions2"> teacher</label>
</fieldset>

<fieldset id="secondary">
<legend>check boxes</legend>
<div id="subOptions1">
<label><input type="checkbox"> buy text books</label>
<label><input type="checkbox"> visit teachers website</label>
<label><input type="checkbox"> attend class</label>
</div>

<div id="subOptions2">
<label><input type="checkbox"> payment</label>
<label><input type="checkbox"> class time</label>
<label><input type="checkbox"> class list</label>
</div>
</fieldset>
</form>

//write a function to enable checkboxes
function enable(selector){
$(selector).show();
$(selector).find(":checkbox").each(function(){
$(this).prop("disabled", false)
});

if($("#secondary").is(":hidden")){
$("#secondary").show();
}
}

function handleRadioButtonChange(){
var numChecked = $("#primary").find(":checked").length; // check if primary is selected

if(numChecked === 0){ // then secondary is enabled
disable("#secondary");
} else { // else primary is diabled/ hid
var showGroup = $(this).data("group"),
hideGroup = $("#primary").find(":radio:not(:checked)").data("group"); // display checkboxes
disable(hideGroup);
enable(showGroup);
}
}

var $radioButtons = $("#primary :radio"); // assign the radio button values
$radioButtons.on("change", handleRadioButtonChange); // call the function here
$radioButtons.trigger("change"); // trigger the radio buttons

</script>

</body>
</html>

output:

when student is selected, only 3 checkboxes as said in question will be displayed

when teacher is selected, only 3 checkboxes for teachers as said in question will be displayed

venereology answered 11 months ago

This needs to be written in JavaScript with two files. One HTML file and a JavaScript...

This needs to be written in JavaScript with two files. One HTML file and a JavaScript file. Make an empty HTML file, put three buttons inside the body and an empty main tag below the buttons. The text of the buttons should be "Foo", "Bar", and "FooBar" respectively. Don't put the " in the buttons that's just for clarification in these instructions. Add unique IDs to each button In your JavaScript, get 3 separate references to the buttons using the...

I need to answer the the following questions in Javascript; ------------------------------------------------------------------------------------------------------------------------ 3 Buttons to display “Lion”,...

I need to answer the the following questions in Javascript; ------------------------------------------------------------------------------------------------------------------------ 3 Buttons to display “Lion”, “Tiger” and “Leopard” in a line and display textfield on next line When“Cat” button is clicked the following 3 things will perform Display text field “User clicks Lion”; Under the text field display a message “Lion is clicked”; Under the message, a photo of a lion is displayed. other buttons will work in a similar logic. ------------------------------------------------------------------------------------------------------------------------ Display the pictures of following “Lion”, “Tiger”...

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game. 1. Blackjack Games Rules: a. The object of the game is to "beat the dealer", which can be done in a number of ways: • Get 21 points on your first two cards (called a blackjack), without a dealer blackjack; • Reach a final score higher than the dealer without...

JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I...

JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I edit the JavaScript below so that when the calculate button is clicked the total price only shows two decimal places by using the toFixed() method? ----------------------------------------------------------------------------------------------------------- JavaScript: // Variables var tax = "tax"; // Tax percentage var taxRate = document.getElementById('tax'); // Selecting tax element // On the time of loading the DOM we are setting the tax rate window.addEventListener('DOMContentLoaded', (event) => { taxRate.value =...

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...

2. The HTML document on the following page consists of JavaScript code executed when the document...

2. The HTML document on the following page consists of JavaScript code executed when the document is loaded. It prompts the user for his/her name (first and last names) then outputs the greeting “Hello Mr. _____!” or “Hello Ms. _____!” (where _____ is the user’s last name) depending on whether the first name is recognized as a male name. (In the code, only three male names are checked; a realistic program would check many more names.) We allow for the...

Create an HTML form with the following: 2 text input fields 1 text area 2 radio...

Create an HTML form with the following: 2 text input fields 1 text area 2 radio buttons or 3 checkboxes 1 button Include labels for fields

1. Define HTML and what each letter means. Also, define JavaScript. (Write at least one (1)...

1. Define HTML and what each letter means. Also, define JavaScript. (Write at least one (1) paragraph (one paragraph contains 5 to 7 sentences). 2.Define Excel. What would you use Excel for? (Write at least one (1) paragraph (one paragraph contains 5 to 7 sentences).

I was listening to my radio one night and I noticed that when I turned on...

I was listening to my radio one night and I noticed that when I turned on my desk light there was a little blip of noise on the radio. I repeated this and I noticed that when I was on the border of completing the circuit, such that when the bulb was flickering, I got severe interference on my radio. My radio was running on batteries. Why does this happen?

2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...

2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...