We Keep Coding

How can I select a random amount of checkboxes?

$('#select_all').on('click', function () {
if (this.checked) {
$('.check').each(function () {
this.checked = true;
});
} else {
$('.check').each(function () {
this.checked = false;
});
}
});
$('.check').on('click', function () {
if ($('.check:checked').length == $('.check').length) {
$('#select_all').prop('checked', true);
} else {
$('#select_all').prop('checked', false);
}
});
Need to alter this above Select All code to only select some random amount of check boxes, like below code example. Any help for this?
$(".random-pick").click(function() {
var maxAllowed = 6;
// Count checkboxes
var random_checkboxes = $("#content_subscribtion_ input.checkbox").size();
// Check random checkboxes until "maxAllowed" limit reached
while ($("#content_subscribtion_ input.checkbox:checked").size() < maxAllowed) {
// Pick random checkbox
var random_checkbox = Math.floor(Math.random() * random_checkboxes) + 1;
// Check it
$("#content_subscribtion_ input.checkbox:nth-child(" + random_checkbox + ")").prop("checked", true);
}
return false;
});

Using this tidy little shuffle method, we can create a random array of checkbox indexes, then slice it to a random number. We can then iterate and use jQuery's get() to find the checkbox index in the randomized array to check.
Array.prototype.shuffle = function() {
let m = this.length, i;
while (m) {
i = (Math.random() * m--) >>> 0;
[this[m], this[i]] = [this[i], this[m]]
}
return this;
}
$('#select_all').on('click', function() {
if ($(this).prop('checked')) {
let minnum = 3, maxnum = 6
let rand = Math.min(maxnum, Math.floor(Math.random() * ($('.check').length - 1 - minnum)) + minnum)
//create our keys array
let keyArray = [...Array($('.check').length).keys()].shuffle().slice(0, rand)
keyArray.forEach((chk_i, i) => {
if (i < rand) $($('.check').get(chk_i)).prop('checked', true)
})
} else {
$('.check').prop('checked', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select all <input type='checkbox' id="select_all"></label>
<div class='cb'>
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
<input type='checkbox' class='check'> checkbox <br />
</div>

I have 8 checkboxes on the UI and I am selecting 3 checkboxes randomly. After each run, different checkboxes will be selected. Please use the exact/clean/proper checkbox common unique identifier in the cy.get('xxxxxx') and use following code in JS:
cy.get('section[class="table-body-cell checkbox-cell grid-1"] input')
.then(
($items) => {
return Cypress._.sampleSize($items.toArray(), 3)
})
.check({force: true});

How to show the results when checkbox is selected

Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.

Just add "script" tag in your html before function start which indicate javascripts code.

validate radio buttons for a quiz

Need to validate radio buttons am developing a quiz page i can only validate 1 set of radio buttons any help be great below is my code. If a user hits the submit button without answering a question I want a alert message displayed saying u must answer whatever question they didnt answer. Any ideas as to why the jquery wont work thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('#quizForm').on('submit', function() {
var emptyCount = 0;
$('li').each(function() {
var found = false;
$(this).find('input[type=radio]').each(function() {
if ($(this).prop('checked')) {
found = true;
}
});
if (!found) {
emptyCount++;
}
});
if (emptyCount > 0) {
alert('Missing checks:' + emptyCount);
return false;
}
return true;
</script>
<form action='mail.php' method='post' id='quizForm' id='1' name='quizForm' onSubmit='form()'>
<ol>
<li>
<h3>1 x 1 =</h3>
<div>
<input type='radio' name='answerOne' id='answerOne' value='A' />
<label for='answerOneA'>A)1</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='B' />
<label for='answerOneB'>B)2</label>
</div>
<div>
<input type='radio' name='answerOne' id='answerOne' value='C' />
<label for='answerOneC'>C)3</label>
</div>
</li>
<li>
<h3>1 x 6 =</h3>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='A' />
<label for='answerTwoA'>A)5</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='B' />
<label for='answerTwoB'>B)6</label>
</div>
<div>
<input type='radio' name='answerTwo' id='answerTwo' value='C' />
<label for='answerTwoC'>C)4</label>
</div>
</li>
<li>
<h3>2 x 8 =</h3>
<div>
<input type='radio' name='answerThree' id='answerThree' value='A' />
<label for='answerThreeA'>A)14</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='B' />
<label for='answerThreeB'>B)12</label>
</div>
<div>
<input type='radio' name='answerThree' id='answerThree' value='C' />
<label for='answerThreeC'>C)16</label>
</div>
</li>
</ol>
<input type="submit" />
</form>
</body>
</html>

First: you should not have the same id multiple times on one page. So the id of each answer should be different.
Anyway you can go through all the li elements and check if there's a checked radio in it.
$('form').on('submit', function() {
var emptyCount = 0;
$('li').each(function() {
var found = false;
$(this).find('input[type=radio]').each(function() {
if ($(this).prop('checked')) {
found = true;
}
});
if (!found) {
emptyCount++;
}
});
if (emptyCount > 0) {
alert('Missing checks');
return false;
}
return true;
});

Writing a custom validator for your code on here would probably just be excessive. I'd use bValidator and call it a day.
See their sections on "radio groups".
http://bojanmauser.from.hr/bvalidator/#groups

Check random checkboxes using JQuery

I know how to check and uncheck particular checkbox with ID and CLASS.
But I want to randomly select 10 checkbox using Jquery.
I will have 100,40 or XX number of checkbox everytime. (HTML Checkbox)
It might be 100 checkbox or 50 checkbox or something else. It will be different everytime.
I want to check 10 checkboxes randomly when a button is pressed.
User can manually select those 10 checkboxes. Or they can just press the random button.
I am using Jquery.
$(':checkbox:checked').length;
But i want to find the length of all the checkboxes and i want to check 10 random checkbox.

Are you looking for something like this?
http://jsfiddle.net/qXwD9/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
//Creating random numbers from an array
function getRandomArrayElements(arr, count) {
var randoms = [], clone = arr.slice(0);
for (var i = 0, index; i < count; ++i) {
index = Math.floor(Math.random() * clone.length);
randoms.push(clone[index]);
clone[index] = clone.pop();
}
return randoms;
}
//Dummy array
function createArray(c) {
var ar = [];
for (var i = 0; i < c; i++) {
ar.push(i);
}
return ar;
}
//check random checkboxes
function checkRandom(r, nodeList) {
for (var i = 0; i < r.length; i++) {
nodeList.get(r[i]).checked = true;
}
}
//console.log(getRandomArrayElements(a, 10));
$(function() {
var chkCount = 100;
//this can be changed
var numberOfChecked = 10;
//this can be changed
var docFrag = document.createElement("div");
for (var i = 0; i <= chkCount; i++) {
var chk = $("<input type='checkbox' />");
$(docFrag).append(chk);
}
$("#chkContainer").append(docFrag);
$("#btn").click(function(e) {
var chks = $('input[type=checkbox]');
chks.attr("checked", false);
var a = createArray(chkCount);
var r = getRandomArrayElements(a, numberOfChecked);
//console.log(r);
checkRandom(r, chks);
});
});
</script>
</head>
<body>
<div id="chkContainer"></div>
<div>
<input type="button" id="btn" value="click" />
</div>
</body>

How about this:
Working example: http://jsfiddle.net/MxGPR/23/
HTML:
<button>Press me</button>
<br/><br/>
<div class="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
JAVASCRIPT (JQuery required):
$("button").click(function() {
// How many to be checked?
var must_check = 10;
// Count checkboxes
var checkboxes = $(".checkboxes input").size();
// Check random checkboxes until "must_check" limit reached
while ($(".checkboxes input:checked").size() < must_check) {
// Pick random checkbox
var random_checkbox = Math.floor(Math.random() * checkboxes) + 1;
// Check it
$(".checkboxes input:nth-child(" + random_checkbox + ")").prop("checked", true);
}
});

getting selected value of radio button in case of action

Hi here is the codes bellow, I've tried many things but I couldnt get value of selected radio button.As you can see I need to get that value for diffrent situations.
<div style="display: inline-block">
<div>
Log Out<span> Welcome </span>YS User 1 noName </div>
<br />
<br />
<br />
<br />
<input type="button" onclick="submitCreate();" value="New Survey" /><br />
<input type="button" onclick="submitEdit();" value="Edit Survey" /><br />
<input type="button" onclick="submitDelete();" value="Delete Survey" /><br />
<input type="button" onclick="submitPreview();" value="Preview Survey" />
</div>
<div style="display: inline-block">
<div>
<table class="MyTable"><thead><tr class="columnHead"><th scope="col"></th><th scope="col">CreatedBy</th><th scope="col">Created Date</th><th scope="col">Is Running</th></tr></thead><tbody><tr><td> <input name="selected" id="1"
type="radio" value="1" /></td><td>1</td><td>12/12/2011 3:43:57 PM</td><td>False</td></tr><tr class="altRow"><td> <input name="selected" id="2"
type="radio" value="2" /></td><td>1</td><td>12/13/2011 4:42:37 PM</td><td>False</td></tr><tr><td> <input name="selected" id="3"
type="radio" value="3" /></td><td>1</td><td>12/13/2011 6:27:38 PM</td><td>False</td></tr></tbody></table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// var value = $$('input[name=selected]:checked')[0].get('value');
// var selectFoo;
// $$('input[name=selected]').each(function (el) {
// if (el.checked == true) {
// selectFoo = el.value;
// }
// });
function getCheckedValue(radioObj) {
if (!radioObj)
return "";
var radioLength = radioObj.length;
if (radioLength == undefined)
if (radioObj.checked)
return radioObj.value;
else
return "";
for (var i = 0; i < radioLength; i++) {
if (radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
};
function submitCreate() {
var adress = "/User/CreateSurvey/";
document.location = adress;
};
function submitEdit() {
var adress = "/Den/Index/" + getCheckedValue('selected');
document.location = adress;
};
function submitDelete() {
var adress = "/User/DeleteSurvey/" + getCheckedValue('selected');
document.location = adress;
};
function submitPreview() {
var adress = "/User/PreviewSurvey/" + getCheckedValue('selected');
document.location = adress;
};
</script>

You can use document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. Loop through those elements to check which is checked.
Here is an example of how to get the value of the checked button from a set of radio buttons with the name "selected":
<html>
<head>
<script type="text/javascript">
function get_radio_value() {
var inputs = document.getElementsByName("selected");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
return inputs[i].value;
}
}
}
function onSubmit() {
var id = get_radio_value();
alert("selected input is: " + id);
}
</script>
</head>
<body>
<form onsubmit="onSubmit();">
<input name="selected" value="1" type="radio"/>1<br/>
<input name="selected" value="2" type="radio"/>2<br/>
<input name="selected" value="3" type="radio"/>3<br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

I choose let number of code for a required function. The one worked for me is given below from api.jquery.com. Hope this helps others.
HTML
<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>
JavaScript
var selectedOption = $("input:radio[name=option]:checked").val()
The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2