Develop Reference

problem while placing alert on checkbox checked in javascript

i need to check if checkbox 1 or 2 is clicked.
error : only background is printing while clicking any checbox and pressing button
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('check')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false;
});
}
function run() {
var checkboxes = document.getElementsByName('check')
if (document.getElementById('c1').checked) {
alert("background");
} else if (document.getElementById('c1').checked) {
alert("foreground");
}
}
<input type="checkbox" name="check" id="c1" value="background" onclick="onlyOne(this)">background</input>
<input type="checkbox" name="check" id="c2" value="foreground" onclick="onlyOne(this)">foreground</input>
<input type="button" value="button" onclick="run()">

In the second statment you write c1 again instead of c2
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('check')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false;
});
}
function run() {
var checkboxes = document.getElementsByName('check')
if (document.getElementById('c1').checked) {
alert("background");
} else if (document.getElementById('c2').checked) {
alert("foreground");
}
}
<input type="checkbox" name="check" id="c1" value="background" onclick="onlyOne(this)">background</input>
<input type="checkbox" name="check" id="c2" value="foreground" onclick="onlyOne(this)">foreground</input>
<input type="button" value="button" onclick="run()">
Instead of use your method why don't use radio and print the radio checked like:
document.getElementById('run').addEventListener('click',AlertMe);
function AlertMe() {
document.getElementsByName('check').forEach( (el) =>{
if(el.checked === true) alert(el.value);
});
}
<input type="radio" name="check" value="background">background</input>
<input type="radio" name="check" value="foreground">foreground</input>
<input type="button" value="button" id='run'>

It's miss named ID of element for foreground
function run(){
[...]
else if(document.getElementById('c1').checked){
alert("foreground");
[...]
it should be:
[...]
else if(document.getElementById('c2').checked){
alert("foreground");
[...]

How to enable disable sup tag in javascript

i have 2 radio buttons and one text box i need to make(*)appear on the textbox when yes radiobutton is clicked and removed when no radio button is clicked.
my view:
<label>code<sup id="star" disabled>*</sup></label>
>Add to electronic<input type="radio" name="yes" id="yes"/>onchange="starenable()"/><input type="radio" name="yes"
> id="no"/>onchange="starenable()"/>no
my javascript:
function starenable() {
if (document.getElementById('yes').checked) {
document.getElementById("star").disabled = false;
} else if (document.getElementById('no').checked) {
document.getElementById("star").disabled = true;
}
}
i tried this but no change in view. any ideas?

Here is your solution https://jsfiddle.net/me9uwL2d/
<input type="radio" name="test" value="Yes" />Yes
<input type="radio" name="test" value="No" />No
<input type="text" />
$('input[type="radio"]').change(function() {
if( $(this).is(':checked') && ($(this).attr('value') == 'Yes')) {
$('input[type="text"]').val("*");
}else{
$('input[type="text"]').val('');
}
});

Input have disable attribute .Change the sub with input .And align the html code on proper format.Then add the * depend on checked radio button
Updated
note: sub tag not have a disable attribute
function starenable() {
if (document.getElementById('yes').checked) {
document.getElementById("star").disabled = false;
} else if (document.getElementById('no').checked) {
document.getElementById("star").disabled = true;
}
document.getElementById("star").innerHTML = document.getElementById('yes').checked ? '*' : '';
}
<label>code <sub id="star"></sub></label> Add to electronic
<input type="radio" name="yes" id="yes" onchange="starenable()" />yes
<input type="radio" name="yes" id="no" onchange="starenable()"/>no

$(document).ready(function() {
$('input[type=radio][name=yes]').change(function() {
if (this.id == 'yes') {
$('#star').hide();
}
else if (this.id == 'no') {
$('#star').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>code<span id="star" >*</span></label>
Add to electronic
<input type="radio" name="yes" id="yes"/>yes
<input type="radio" name="yes"
id="no"/>no
use this

<label>code<sup id="star" style="visibility:hidden">*</sup></label>
Add to electronic
<input type="radio" name="yes" id="yes" onchange="starenable()"/>yes
<input type="radio" name="yes" id="no" onchange="starenable()"/>no
function starenable() {
if (document.getElementById('yes').checked)
document.getElementById("star").style.visibility = "visible";
else if (document.getElementById('no').checked)
document.getElementById("star").style.visibility = "hidden";
}

Effective hide & show classes

I'm wondering if the code below can be simplified/normalized into something more efficiently. The code works as it should but im thinking it could be smaller. It basicly hides and shows classes when a radio option is selected.
$("input[type='radio']").click(function () {
if ($("#type1").is(":checked")) {
$("#showstoring").show("fast") &&
$("#showonderhoud").hide("fast") &&
$("#showspoed").hide("fast");
} else if ($('#type2').is(':checked')) {
$("#showstoring").hide("fast") &&
$("#showonderhoud").hide("fast") &&
$("#showspoed").show("fast");
} else if ($('#type0').is(':checked')) {
$("#showstoring").hide("fast") &&
$("#showonderhoud").show("fast") &&
$("#showspoed").hide("fast");
} else {
$("#showstoring").hide("fast") &&
$("#showonderhoud").hide("fast") &&
$("#showspoed").hide("fast");
}
});

Use data-* attributes to cross-reference buttons and elements by that data value:
var $content = $("[data-content]");
$("input[type='radio']").on("change", function() {
$content.hide(260).filter("[data-content='"+ this.dataset.show +"']").show(260);
});
[data-content]{display:none;} /* hide initially */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" data-show="1" name="r">A
<input type="radio" data-show="2" name="r">B
<input type="radio" data-show="3" name="r">C
<input type="radio" name="r" checked> Else?<br>
<div data-content="1">AAA</div>
<div data-content="2">BBB</div>
<div data-content="3">CCC</div>

Javascript - If/Else If result

I have these blocks:
function generateEmail(){
if
(document.getElementById('emailOpt1').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if
(document.getElementById('emailOpt2').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if
(document.getElementById('emailOpt3').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if
(document.getElementById('emailOpt4').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
and this:
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick=generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea></td></tr>
when I hit the 'generate email' button after selecting one of the 'radios', the code seems to revert the selection back to the first option as I keep on getting the first option on the textarea.
any ideas and a possibly a simpler way to do this will be appreciated.
note: I had to go this route since the user wants the radios to be buttons.

I fix it :
Change :
.checked = "true"
to :
.checked == true
Final code :
<html>
<head>
</head>
<body>
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick="generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea>
<script>
function generateEmail(){
if (document.getElementById('emailOpt1').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if (document.getElementById('emailOpt2').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if (document.getElementById('emailOpt3').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if (document.getElementById('emailOpt4').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
</script>
</body>
</html>

Get only two values of multiple Checkboxes

I found this code on codeLAB and I'm trying to get true result only if "Cricket" and "Boxing" are checked. Currently it works if both of them are checked, but also when the others are selected.
https://jsfiddle.net/kubus1234/oksm8eaw/
$("button").click(function() {
var favorite = [];
$.each($("input[name='sport']:checked"), function() {
favorite.push($(this).val());
});
var test = [];
$.each($("input[name='sport']:checked"), function() {
test.push($(this).val());
});
if (favorite[1] == "cricket" || test[1] == "boxing") {
alert("Your are the best");
} else {
alert("Your are looser");
}
});
Any solution?

Not sure why you traversed the selected checkboxes twice, but here's one way to get your results:
$(document).ready(function() {
$("button").click(function() {
var selected = $("input[name='sport']:checked").toArray().map(function(checkbox) {
return $(checkbox).val();
});
if (selected.length === 2 && selected[0] === "cricket" && selected[1] === "boxing") {
alert("You are the best");
} else {
alert("You lose");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport">Football</label>
<label>
<input type="checkbox" value="baseball" name="sport">Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport">Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport">Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport">Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport">Swimming</label>
<br>
<button type="button">Get Values</button>
</form>

This would be easily researchable but I'll post a solution anyway
1) I gave the checkboxes ids
2) I changed the JavaScript to check if both checkboxes are checked at once with .is(":checked")
<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" id="chkFootball" value="football" name="sport"> Football</label>
<label><input type="checkbox" id="chkBaseball" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" id="chkCricket" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" id="chkBoxing" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" id="chkRacing" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" id="chkSwimming" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
$(document).ready(function() {
$("button").click(function(){
if ($('#chkCricket').is(':checked') && $('#chkBoxing').is(':checked')) {
alert("Checked");
}
else {
alert("Not checked");
}
});
});

https://jsfiddle.net/oksm8eaw/2/
Please don't use javascript alerts. Alerts cause cancer...
... instead use ids, and jQuery html(): add this to the HTML: <div id="result"></div>
Solution
$(document).ready(function() {
$("button").click(function(){
var matchCount = 0;
$('input').each(function(){
if( this.value == "cricket" || this.value == "boxing") {
if(this.checked) matchCount++;
}
});
if(matchCount>1){
$("#result").html("YUP!");
} else {
$("#result").html("NOPE!");
}
});
});