Get all checkboxes and check them by previous sibling - javascript

I have a code like this:
<div class="elements" id="elements">
<span>
<span>Check anyone (required)</span>
</span>
<input type="checkbox" name="vehicle" value="minivan"> Minivan
<input type="checkbox" name="vehicle" value="car"> Car
<input type="checkbox" name="vehicle" value="boat"> Boat
<span>
<span>Check anyone</span>
</span>
<input type="checkbox" name="sport" value="basketball"> Basketball
<input type="checkbox" name="sport" value="soccer"> Soccer
<input type="checkbox" name="sport" value="tennis"> Tennis
</div>
<button id="check">Check</button>
<script>
document.getElementById("check").onclick = function () {
// Check it all... if required text is found and at least one checkbox is not found for that specific checkbox name, then throw alert
}
</script>
I want to check all checkboxes in the div class/id elements and then check the previous span span tag and if there is a "required" text, then make sure one at least one checkbox is selected.
For example, let's start with checkbox name="vehicle". We reference/look back in the previous sibling <span><span> and we see if the text "required" exists. If it does exist, we need to make sure at least checkbox of name=vehicle is checked. If not, we need to `alert('error! please check a checkbox');
For example in name="sport", we do not have to check if at least one checkbox is checked because the text "required" does not exist in previous span span.
I know its weird but it has to be like this - just need to work with it. any help? thanks everyone!

arrange you code as below:
<div class="elements" id="elements">
<div class="vehicle">
<span>
<span>Check anyone (required)</span>
</span>
<input type="checkbox" name="vehicle" value="minivan"> Minivan
<input type="checkbox" name="vehicle" value="car"> Car
<input type="checkbox" name="vehicle" value="boat"> Boat
</div>
<div class="sport">
<span>
<span>Check anyone</span>
</span>
<input type="checkbox" name="sport" value="basketball"> Basketball
<input type="checkbox" name="sport" value="soccer"> Soccer
<input type="checkbox" name="sport" value="tennis"> Tennis
</div>
</div>
and if you are using jQuery then
$('input[type=checkbox][name="vehicle"]').each(function(key,item){
if($(item).prop('checked')){
console.log('this one is checked'+item);
}
});
Note:
change your button as below
<button id="check" type="button">Check</button>
if is inside a form tag else it will make post back request, as default button behaviour is type="submit".

This could be the solution for you. I changed the HTML markup a little in order to have ability to get group easily.
// Checks whether required group has any checked checkbox
function checkAnyChecked(groupEl) {
if (!groupEl.classList.contains('required')) {
return true;
}
const checkboxes = groupEl.querySelectorAll('input[type="checkbox"]');
for (let checkbox of checkboxes) {
if (checkbox.checked) {
return true;
}
}
return false;
}
const groups = document.querySelectorAll('.group');
for (let group of groups) {
if (!checkAnyChecked(group)) {
console.log('Alert! Group not filled!', group);
}
}
<div class="elements" id="elements">
<div class="group required">
<span>Check anyone (required)</span>
<input type="checkbox" name="vehicle" value="minivan"> Minivan
<input type="checkbox" name="vehicle" value="car"> Car
<input type="checkbox" name="vehicle" value="boat"> Boat
</div>
<div class="group">
<span>Check anyone</span>
<input type="checkbox" name="sport" value="basketball"> Basketball
<input type="checkbox" name="sport" value="soccer"> Soccer
<input type="checkbox" name="sport" value="tennis"> Tennis
</div>
</div>
<button id="check">Check</button>

Try this one, will work as you want
$('document').ready(function()
{
$(document).on("click", '#check', function(e){
var parent_vdiv = $(".vehicle").parent('div').attr('id');
if(parent_vdiv=="required"){
var IsCheckedVehicle = $('input[name="vehicle[]"]:checked').length > 0;
if(!IsCheckedVehicle){
alert('Please select Vehicle atleast one');
return false;
}
}
var parent_sdiv = $(".sport").parent('div').attr('id');
if(parent_sdiv=="required"){
var IsCheckedSport = $('input[name="sport[]"]:checked').length > 0;
if(!IsCheckedSport){
alert('Please select Sport atleast one');
return false;
}
}
$(".vehicle").prop('checked', true);
$(".sport").prop('checked', true);
return true;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elements" id="elements">
<span>
<span>Check anyone (required)</span>
</span>
<div id="required">
<input type="checkbox" name="vehicle[]" class="vehicle" value="minivan"> Minivan
<input type="checkbox" name="vehicle[]" class="vehicle" value="car"> Car
<input type="checkbox" name="vehicle[]" class="vehicle" value="boat"> Boat
</div>
<span>
<span>Check anyone</span>
</span>
<div id="not_required">
<input type="checkbox" name="sport[]" class="sport" value="basketball"> Basketball
<input type="checkbox" name="sport[]" class="sport" value="soccer"> Soccer
<input type="checkbox" name="sport[]" class="sport" value="tennis"> Tennis
</div>
</div>
<button id="check">Check</button>

Related

Change HTML checkbox from unchecked to check

<table>
<td style="width:40%;" bgcolor="#FFDDDD">
<label>
<input type="checkbox" value="1" name="crs_domain[1]" unchecked="">
Math;
</label>
<label>
<input type="checkbox" value="2" name="crs_domain[2]" unchecked="">
Science;
</label>
<label>
<input type="checkbox" value="3" name="crs_domain[3]" unchecked="">
Bio;
</label>
</td>
</table>
I am doing tedious work about updating tick the checkbox according an excel file.
Example: Science and Bio need to be tick. Than i need to tick the checkbox of Science and Bio, after that submit.
I realize that i can change the html element from unchecked to checked, then click Submit it will be the same result.
<label>
<input type="checkbox" value="2" name="crs_domain[2]" checked="">
Science;
</label>
So i wanna write an Extension to do stuff like: when i copy "Science, Bio". The extension will auto change my html element, than i just need to copy the subject who need change, than submit, no need tick one by one.
I test var x = document.getElementsByTagName("label") on browser console, x[1] will be the element. But cannot x[1].checked let unchecked become checked.
So my question is how to let unchecked become checked.
var secondInput = document.getElementsByTagName("input")[1];
secondInput.checked = true;
After submit trigger SetCheckBox(). Also set id of each checkbox
function SetCheckBox() {
document.getElementById("science").checked = true;
document.getElementById("bio").checked = true;
}
<body onload="SetCheckBox()">
<table>
<td style="width:40%;" bgcolor="#FFDDDD">
<label>
<input id="math" type="checkbox" value="1">
Math;
</label>
<label>
<input id="science" type="checkbox" value="2">
Science;
</label>
<label>
<input id="bio" type="checkbox" value="3">
Bio;
</label>
</td>
</table>
</body>

Toggle checkboxes with radio button

Building on this answer I'm trying to use a radio button to check all checkboxes on toggle but if it's not toggled they should show unchecked or disabled. They control the layers on map the default should be all on and users can then remove them.
Here's the fiddle for what I've tried below;
$('input[value="energyRating"]').change(function() {
if ($(this).is(':checked')){ //radio is now checked
$('input[id="check2"]').prop('checked', true);
$('input[id="check"]').prop('checked', false);
}
else { //radio is now checked
$('input[id="check2"]').prop('checked', false);
$('input[id="check"]').prop('checked', false);
}
});
Clarification: in the fiddle if you click the extra radio button no checkboxes should be checked
it is better to handle with class name when u have number of items.please check the below code it might help you to select all and reset all.
$('.click').click(function() {
//select all radio is now checked
$('.event').prop('checked', true);
$('.reset').prop('checked', false);
});
$('.reset').click(function() {
//reset radio is now checked
$('.click').prop('checked', false);
$('.event').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<input type="radio" class="click" value="energyRating">select all<br>
<input type="radio" class="reset" value="extra">reset
</div>
<div id="b">
<input id ='check' type="checkbox" class="event" value="Bike1">I have a bike<br>
<input id ='check' type="checkbox" class="event" value="Car">I have a car <br>
<input id ='check2' type="checkbox" class="event" value="Bike">I have another bike<br>
<input id ='check2' type="checkbox" class="event" value="Car">I have another car
</div>
The id attribute of an HTML element should be unique, so the repeated use of check and check2 make your HTML invalid. I would just drop those id attributes.
One way to do what you need, and also avoid code repetition, is to mark the checkbox elements with data attributes which refer to the radiobutton for which it should be checked.
Here is how that would look:
$('input[name="sex"]').change(function() {
var selected = $('input[name="sex"]:checked').val();
$('input[name="vehicle"]').each(function () {
$(this).prop('checked', $(this).data("rating") === selected);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<input type="radio" name="sex" value="energyRating">energyRating<br>
<input type="radio" name="sex" value="energyRatingByCount">energyRatingByCount<br>
<input type="radio" name="sex" value="extra">extra
</div>
<div id="b">
<input type="checkbox" data-rating="energyRating" name="vehicle" value="Bike1">I have a bike<br>
<input type="checkbox" data-rating="energyRating" name="vehicle" value="Car">I have a car <br>
<input type="checkbox" data-rating="energyRatingByCount" name="vehicle" value="Bike">I have another bike<br>
<input type="checkbox" data-rating="energyRatingByCount" name="vehicle" value="Car">I have another car
</div>

jQuery multi-row form: disable submit until each row has a radio checked

I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>

How to show item selected from dropdown should not appear in checkbox list

On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.
I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.
<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work

how to show/hide a div on the basis of a checkbox selection in angular js

I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.
Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>
I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle
<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>
Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>

Categories

Resources