We Keep Coding

update image with jquery based on multiple radio button inputs

An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?

Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});

You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>

JQUERY Chaining variables in an if-statement, logical operators

I currently have 2 groups of checkboxes. The submit button of the form shall stay disabled until at least one checkbox of each group is checked.
By now it works just for the first category (name/id all the same except the number, you'll see).
HTML:
<h3>Choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled="">
JS:
$(function () {
$("#func1, #func2, #func3").change(function () {
if ( $("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked') ) {
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
});
I have the current code in the jsfiddle: https://jsfiddle.net/g4jcjn51/
So I thought about sth. like this (which doesn't work):
if ( ($("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && $("#plat1").is(' :checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )
{
}
Any solution?
Thanks!

$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4").change(function () {
if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && ($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )) {
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});

What about counting checked checkboxes like this:
var checked1 = $('input[name="func1"]:checked').length;
var checked2 = $('input[name="func2"]:checked').length;
if (checked1 > 0 && checked2> 0){
//Do your stuff
} else {
alert("At least one checkbox of each group has to be checked.");
}

You could wrap it into two groups, #group1 and #group2 i.e <div id="group1"> etc, and then
$("input[type=checkbox]").on('click', function() {
if ($("#group1 input:checked").length>0 &&
$("#group2 input:checked").length>0) {
$("#idAbfragen").attr('disabled', false);
} else {
$("#idAbfragen").attr('disabled', true);
}
});
forked fiddle -> https://jsfiddle.net/kee7m06r/

You can give your form an id and then select all checkboxes at once and make the verification.
HTML:
<h3>Choose func</h3>
<form id="form1">
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled=""/>
</form>
JS:
$(function () {
$("#form1").find("input[type=checkbox]").change(function () {
if ($(this).is(' :checked')){
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
});
JSFiddle

I'd suggest you group your checkboxes using a <div> or a <fieldset>, so that you can easily tell which items are in which group. Then you should be able to easily figure out whether all the groups have at least one checked input.
$(function() {
$("input[type=checkbox]").change(function() {
var anySegmentIsUnchecked = $('fieldset').is(':not(:has(:checked))');
$('.input-button').prop('disabled', anySegmentIsUnchecked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<fieldset>
<legend>
<h3>Choose func</h3>
</legend>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" />f1
<br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" />f2
<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3" />f3
<br/>
</fieldset>
<fieldset>
<legend>
<h3>Choose plat</h3>
</legend>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" />p1
<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" />p2
<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" />p3
<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" />p4
<br/>
</fieldset>
</form>
<input type="submit" name="abfrage" class="input-button" id="idAbfragen" value="submit" disabled>
Fiddle
One big advantage to this approach is that it follows the open/closed principle: you don't have to change your javascript code at all if you add more groups of checkboxes.

Target input by value

I have 6 inputs in my HTML like this:
<input type="radio" value="1" />
<input type="radio" value="2" />
<input type="radio" value="3" />
<input type="radio" value="4" />
<input type="radio" value="5" />
<input type="submit" onClick="myFunction();" value="submit" />
When the submit button is clicked, a Javascript function is called. In this javascript function, I want to check which of the radio buttons is checked and which aren't.
Thanks in advance!

javascript
function myFunction() {
var x = document.getElementsByTagName("input");
for(i = 0; i < x.length; i++ ) {
if(x[i].type = "radio") {
if(x[i].checked) {
alert(x[i].value);
}
}
}
}

you can do it easily by jquery
function myfunction(){
$("input[type=radio]:checked").each(function(){
//do something here
});
}

You need to add a class first. this will ensure that you are not checking other radio elements in your page. See below.
<input type="radio" value="1" class='radio'/>
<input type="radio" value="2" class='radio'/>
<input type="radio" value="3" class='radio'/>
<input type="radio" value="4" class='radio'/>
<input type="radio" value="5" class='radio'/>
<input type="submit" onClick="myFunction();" value="submit" />
<!-- javascript- add script tags -->
function myFunction() {
$('.radio').each(function() {
if($(this).is(':checked')) {
alert("it's checked");
}
})
}

Checkbox attributes in html and javascript

I'm trying to make a very basic calculator, and I want to have checkboxes to choose what operation to perform to the numbers. I am trying to make sure that when a box is checked all of the other boxes are unchecked. I am only testing this first, so thats's why Only one checkbox has the code for it. the function calculate is something I am not worried about, as I already tested it and it works. Thanks!
<form>
<input type="text" id="num1">
<input type="checkbox" value="+" onClick="calculate0();
document.getElementById("subtract").checked = "false"; ">
<input type="checkbox" value="-" id="subtract" onClick="calculate1()" checked="false">
<input type="checkbox" value="*" onClick="calculate2()">
<input type="checkbox" value="/" onClick="calculate3()">
<input type="text" id="num2">
<input type="text" id="answer" readonly>
</form>

Use radio buttons to choose the calculation mode and calculate it only with a "submit" button, or use submit - buttons instead. This is much more logical and looks better!
EDIT:
Use radio buttons like this:
<form>
<input type="radio" name="method" onclick="selectMethod('+');" />+ <br />
<input type="radio" name="method" onclick="selectMethod('-');" />- <br />
<input type="radio" name="method" onclick="selectMethod('*');" />* <br />
<input type="radio" name="method" onclick="selectMethod('/');" />/ <br />
</form>
<script>
var method = "+";
function selectMethod(m) {
method = m;
}
</script>
Or use submit-buttons like this (it's the easiest way):
<input type="submit" value="+" onclick="calculate0;" />
<input type="submit" value="-" onclick="calculate1;" />
<input type="submit" value="*" onclick="calculate2;" />
<input type="submit" value="/" onclick="calculate3;" />

How to check if at least one radio button is checked in this function?

I'm making a quiz with PHP, but I am using JavaScript to go between the questions first and then I submit the form and let PHP do the rest.
I made two JavaScript functions called ChangeQuestion() and BackQuestion().
function ChangeQuestion(prev, next) {
$('#' + prev).fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
function BackQuestion(last, prev) {
$('#' + prev).fadeOut(600, function() {
$('#' + last).fadeIn(600);
});
}
They're pretty basic. But what I would like to do is check if their is at least one radio button checked in a question before continuing with the function. You'll be able to see in my markup/HTML how I'm using the above functions.
First of all, here's a jsFiddle: http://jsfiddle.net/3XdUA/
Here's my markup:
<form id="quiz1" name="quiz1" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<div id="starter">
Hello! Welcome to the HTML Quiz powered by PHP. Click on Start to begin.
<br /><br />
<button type="button" onclick="ChangeQuestion('starter','question1');$('#qIndicator').fadeIn(800);">Start »</button>
</div>
<div id="question1" style="display:none;">
1. What does HTML stand for?
<br />
<br />
<input type="radio" name="q1" id="q1-a1" />
<label for="q1-a1">Hyperlinks and Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q1" id="q1-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="ChangeQuestion('question1','question2');$('#qIndicator').html('Question 2 of 10');">Next »</button>
</div>
<div id="question2" style="display:none;">
2. What is the proper way to add a blue background to the <code><body></code> and remove the margin & padding?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q2-a1"><body backgroundColor="blue" padding="0" margin="0"></label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q2-a2"><body style="background-color: blue; margin: 0; padding: 0;"></label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q2-a3"><body style="backgroundColor: blue; margin: 0px; padding: 0px;"></label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q2-a4"><body background="blue" padding="0" margins="0"></label>
<br /><br />
<button type="button" onclick="BackQuestion('question1','question2');$('#qIndicator').html('Question 1 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question2','question3');$('#qIndicator').html('Question 3 of 10');">Next »</button>
</div>
<div id="question3" style="display:none;">
3. Which of the following font styling tags isn't valid?
<br />
<br />
<input type="radio" name="q3" id="q3-a1" />
<label for="q3-a1"><small></label>
<br />
<input type="radio" name="q3" id="q3-a2" />
<label for="q3-a2"><strong></label>
<br />
<input type="radio" name="q3" id="q3-a3" />
<label for="q3-a3"><em></label>
<br />
<input type="radio" name="q3" id="q3-a4" />
<label for="q3-a4"><large></label>
<br /><br />
<button type="button" onclick="BackQuestion('question2','question3');$('#qIndicator').html('Question 2 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question3','question4');$('#qIndicator').html('Question 4 of 10');">Next »</button>
</div>
<div id="question4" style="display:none;">
4. Suppose you have this HTML on your page:
<br /><br />
<code>
<a name="target4">Old listing</a>
</code>
<br /><br />
How would you link to the above target?
<br />
<br />
<input type="radio" name="q4" id="q4-a1" />
<label for="q1-a1"><a url="#target4">Check Old Listing as well</a> </label>
<br />
<input type="radio" name="q4" id="q4-a2" />
<label for="q1-a2"><a href="#target4">Check Old Listing as well</a></label>
<br />
<input type="radio" name="q4" id="q4-a3" />
<label for="q1-a3"><link url="target4">Check Old Listing as well</link> </label>
<br />
<input type="radio" name="q4" id="q4-a4" />
<label for="q1-a4"><a href="Listing.target4">Check Old Listing as well</a></label>
<br /><br />
<button type="button" onclick="BackQuestion('question3','question4');$('#qIndicator').html('Question 3 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question4','question5');$('#qIndicator').html('Question 5 of 10');">Next »</button>
</div>
<div id="question5" style="display:none;">
5. What does HTML stand for?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q1-a1">Hyper Tool Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="BackQuestion('question4','question5');$('#qIndicator').html('Question 4 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question5','question6');$('#qIndicator').html('Question 6 of 10');">Next »</button>
</div>
<div id="question6" style="display:none;">
6. What does HTML stand for?
<br />
<br />
<input type="radio" name="q2" id="q2-a1" />
<label for="q1-a1">Hyper Tool Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a2" />
<label for="q1-a2">Home Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a3" />
<label for="q1-a3">Hyper Text Markup Language</label>
<br />
<input type="radio" name="q2" id="q2-a4" />
<label for="q1-a4">Hyper Text Marking Language</label>
<br /><br />
<button type="button" onclick="BackQuestion('question5','question6');$('#qIndicator').html('Question 5 of 10');">« Back</button>
<button type="button" onclick="ChangeQuestion('question6','question7');$('#qIndicator').html('Question 7 of 10');">Next »</button>
</div>
</form>
Yes, it is long. Sorry about that. But, I provided a jsFiddle which would be much easier to understand. (because of the preview, etc.)
I do know how to check if a radio is selected, but I do not know how to make sure that one is selected with this function.

use :radio:checked
function ChangeQuestion(prev, next) {
var current = $('#' + prev);
var selection = current.find(":radio:checked").attr("id");
if (selection) {
alert(selection);
}
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
an alternative to my update would be
function ChangeQuestion(prev, next) {
var current = $('#' + prev);
if (prev != "starter") {
var selection = current.find(":radio:checked").attr("id");
if (selection === undefined) {
alert("no selection");
} else {
alert(selection);
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
} else {
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}
}
I just didn't like repeating
current.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
see here

Use the :checked pseudo selector.
function ChangeQuestion(prev, next) {
var prevQ = $('#'+prev);
var numChecked = prevQ.find('input[type=radio]:checked').length;
if( prev !=='starter' && numChecked == 0 ) {
// no radio checked in this question
return;
}
prevQ.fadeOut(600, function() {
$('#' + next).fadeIn(600);
});
}

You can also use $("[name=q1]").is(":checked") just to check if something is selected. Of course, substitute q1 with whichever question you are on. In your case it looks like you'll be using q1, q2, etc.