I need to select all and deselect all check boxes on a button toggle.
here is the html code for check-boxes
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
when I select this check box aria-checked="true" is automatically added to <label for="labelauty-2"> which output this
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
It changes the status to true or false when its checked and unchecked.
Now I have several check-boxes like this which needs to be checked or unchecked using a toggle button.
here is my html code for toggle button
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkboxtoggle" onclick="toggle()">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
Here is my JS code which returns an error "prop is not defined"
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
How can I achieve this using javascript or jquery
Working ( without event listeners)
Note: See next example, that used event listeners and is preferred.
You had some issues I had to fix in order to get this working.
See: https://jsfiddle.net/0p64mdsg/4
First off, your input types were not actually toggles.
Secondly, you were not passing this when you were calling the toggle function.
Current version of code in my jsFiddle:
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" >
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label> tc_Logout
</div>
<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>
Test1
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
Using Event Listeners
Since onClick is not preferred, you should handle the toggle click handling like this: https://jsfiddle.net/0p64mdsg/15/
<script>
document.getElementById("Toggle-Switch").addEventListener("click", toggle);
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2' + source);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = document.getElementById("Toggle-Switch").checked;
}
}
</script>
Try This To select/Deselect All Chechbox
$(document).on('click','#chkAll',function(){
if($(this).prop('checked')==true){
$('.ChkSelect').attr("checked",true)
}
else
{
$('.ChkSelect').attr("checked",false)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect"><br/><br/>
Select/Deselect All :<input type="checkbox" id="chkAll"> <br/><br/>
Related
I am trying to make a math quiz game for my classroom. I have created a page to select the type of game the user wants. I have created a function to select the the element when it is clicked to change colors but it is not changing colors. I have tried to hard code the styling and it works properly but I only want the styling when the radio container is selected.
const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
const radioInputs = document.querySelectorAll('input');
const bestScores = document.querySelectorAll('.best-score-value');
startForm.addEventListener('click', () => {
radioContainers.forEach((radioEl) => {
radioEl.classList.remove('selected-label');
if (radioEl.childeren[1].checked) {
radioEl.classList.add('selected-label');
}
});
});
RADIO CONTAINER TO BE SELECTED
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">
<span>Best Score</span>
<span class="best-score-value">0.0</span>
</span>
</div>
I think you mean this
Delegation from startForm is fine, then we can loop over the divs to see if the radio in the div was checked
const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
startForm.addEventListener('click', (e) => {
const tgt = e.target;
if (tgt.name === "Questions") {
const parent = tgt.closest('.radio-container')
radioContainers.forEach(container => container.classList.toggle('selected-label', container === parent && tgt.checked))
}
});
.selected-label { color: green }
<form id="start-form">
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
</form>
Question is somewhat a duplicate.
change label color radio when checked
I got the answer from here, and it can be done using CSS without needing to use JavaScript.
(Notice some buttons have different colors when clicked)
Here's a snippet
input[type="radio"]:checked ~ span
{
color:red;
}
input[type="radio"]:checked.correct ~ span
{
color:green;
}
<form id="start-form">
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99" class = "correct">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99" class = "correct">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
</form>
I need help with my code. I've looked a lot on the internet, but the code i have found doesn't work.
I have two toggle buttons (hg-geraet-b, hg-geraet-v).
The button "hg-geraet-v" should not be selectable and deactivated by default.
If the button "hg-geraet-b" is pressed (Toggle to activate), the button "hg-geraet-v" should be selectable.
If you now check the button "hg-geraet-v" to activate, the button "hg-geraet-b" should be reset and no longer be selectable.
Which Java code do I have to insert into the < script>...< /script> at the end of my code, so that this works?
<div>
<label><input type="checkbox" name="product" class="card-input-element" />
<div class="card text-center">
<p>Header</p>
<div class="card-body">
<p class="card-text">Kategorie</p>
<div><input id="hg-geraet-b" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Beraten" data-off="Beraten">
</div>
<div><input onclick="hg-geraet-v" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Verkauft" data-off="Verkauft">
</div>
</div>
</div>
</label>
</div>
Try this:
const hgGeraetB = document.querySelector('#hg-geraet-b'),
hgGeraetV = document.querySelector('#hg-geraet-v');
const handleChange = () => {
if (hgGeraetB.checked) {
hgGeraetV.disabled = false;
} else if (hgGeraetV.checked) {
hgGeraetB.checked = false;
hgGeraetB.disabled = true;
}
}
hgGeraetB.addEventListener('change', handleChange)
hgGeraetV.addEventListener('change', handleChange)
<div>
<label><input type="checkbox" name="product" class="card-input-element" />
<div class="card text-center">
<p>Header</p>
<div class="card-body">
<p class="card-text">Kategorie</p>f
<div><input id="hg-geraet-b" type="checkbox" data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-size="sm" data-on="Beraten" data-off="Beraten">
</div>
<div><input id="hg-geraet-v" type="checkbox" disabled='true' data-style="w-100" data-onstyle="success" data-offstyle="outline-secondary" data-toggle="toggle" data-size="sm" data-on="Verkauft" data-off="Verkauft">
</div>
</div>
</div>
</label>
</div>
I have an accordion with check boxes for each accordion item, some of the accordion items are hidden with style="display:none;" attribute.
here is a screenshot of the html dom hierarchy
here is the html code
<div id="testcases" class="accordion js-accordion">
<div class="accordion__item js-accordion-item" id="0001" name="com.edgecase.TS_EdgeHome">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_Login" aria-hidden="true" style="display: none;">
<label for="labelauty-0001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_Login</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" name="com.edgecase.TS_EdgeHome">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-00011">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_Logout</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display:none;" name="com.edgecase.TS_EdgePanel">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_AddContract" aria-hidden="true" style="display: none;">
<label for="labelauty-1001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_AddContract</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="2001" style="display:none;" name="com.edgecase.TS_EdgeRoute">
<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2001" value="tc_VerifyContract" aria-hidden="true" style="display: none;">
<label for="labelauty-2001">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>tc_VerifyContract</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
I have created a function to select/deselect all check boxes, but it also checks the hidden check boxes.
function toggle(source){
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
for(var i=0, n=checkboxes.length; i<n; i++) {
checkboxes[i].checked = source.checked;
}
}
Using below code I could add the attribute to label tag
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox')
for(var i=0, n=checkboxes.length; i<n; i++) {
var id = checkboxes[i].attributes.id
var id = id.textContent
$('label[for="'+id+'"]').attr("aria-checked","true");
}
I need to select/deselect all the check boxes for div elements without style="display:none;" attribute.(i.e. I need to select/deselect only visible check boxes) and add aria-checked="true" to label tag if checked else add aria-checked="false" using for value inside label tag.
can somebody help me figure this out?
You can verify if your checkbox is displayed with the fillowing:
for(var i=0, n=checkboxes.length; i<n; i++) {
if (checkboxes[i].style.display != "none"){
checkboxes[i].checked = true;
}
}
//find by name, filter for only those that are visible
$(document.getElementsByName('inputLableautyNoLabeledCheckbox')).filter(':visible').each( function () {
//change the state
this.checked = source.checked;
//find the label for the element and change it's aria state
$('label[for="'+ this.id +'"]').attr("aria-checked", source.checked);
} );
This will be even easy with jquery as I am seeing jquery tag in your question.
$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
See the Snippet below:
$(document).ready(function () {
$("#chkCheckAll").click(function () {
$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
});
$("#chkDisplayAll").click(function(){
if($("#chkDisplayAll").is(":checked"))
$("input:checkbox.not-visible").show();
else
$("input:checkbox.not-visible").hide();
})
$("input:checkbox.not-visible").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chkCheckAll" /> Check All
<input type="checkbox" id="chkDisplayAll" /> Display All
<br/>
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox1" />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox3" />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox5" />
You can also test it here
I have following html and jquery code segments to validate at least one check box. I am new for jQuery so I can not validate this two check boxes. Please help me. Thank you
<div class="row">
<div class="form-horizontal">
<label class="col-sm-5 control-label input-sm">Payement Type</label>
<div class="col-sm-5">
<span id="errfnBC9" style="color:red;font-size:8pt"></span>
<input type="checkbox" name="cashactive" id="activecash" value="Cash" checked style="font-weight: bold;font-size: 11px;"> Cash
<input type="checkbox" name="creditactive" id="activecredits" value="Credit" style="font-weight: bold;font-size: 11px;"> Credit<br>
</div>
</div>
</div>
if ($('#activecash').find('input[type=checkbox]:checked').length == 0) {
document.getElementById('errfnBC9').style.display = "block";
document.getElementById('errfnBC9').innerHTML = "**Please select at least one checkbox";
return false;
}
use only with javascript or jquery .Apply with onchange event it will validate each time of the box checking.
$(document).ready(function (){
$('input[type=checkbox]').on('change',function (){
if ($('input[type=checkbox]:checked').length == 0) {
$('#errfnBC9').html( "**Please select atleast one checkbox");
}
else{
$('#errfnBC9').html( "");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-5 control-label input-sm">Payement Type</label>
<div class="col-sm-5">
<span id="errfnBC9" style="color:red;font-size:8pt"></span><br>
<input type="checkbox" name="cashactive" id="activecash" value="Cash" checked style="font-weight: bold;font-size: 11px;"> Cash
<input type="checkbox" name="creditactive" id="activecredits" value="Credit" style="font-weight: bold;font-size: 11px;"> Credit<br>
</div>
</div>
</div>
You have to add an event listener to see when the state of the checkboxes is changing:
$(".validate").on("change", function(e) {
if($("input.validate:checked").length == 0) {
$("#error").html("You must select one.");
} else {
$("#error").html("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cash" class="validate" checked /><label for="cash">Cash</label>
<input type="checkbox" id="credit" class="validate" /><label for="credit">Credit</label>
<p id="error"></p>
I am trying to toggle the visibility to div content using javascript, not jquery. I can get it to work using a huge else if, but I am trying to use a for loop.
HTML
<fieldset >
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div >
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id" >Bill to your Account Number.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id" >Bill to a paymentcard.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id" >Bill to the reciever or a third party.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id" >Pay with check or money order.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id" >Pay with cash.</label>
</div>
</fieldset>
<div id="111"><p>This is 111</p></div>
<div id="222"><p>This is 222</p></div>
<div id="333"><p>This is 333</p></div>
<div id="444"><p>This is 444</p></div>
<div id="555"><p>This is 555</p></div>
Javascript
$(":input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
for(i=0; i<=choice.length; i++){
if($(this).val() === choice[i]){
$("#"+i).show();
} else {
$("#"+i).hide();
}
}
}
The problem I am having is that it does not seem to recognize the index of the array I am iterating through. So it always reads false. No JQuery please.
Demo - https://jsfiddle.net/of3gm5h8/1/
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id">Pay with cash.</label>
</div>
</fieldset>
<div id="111" class="hide">
<p>This is 111</p>
</div>
<div id="222" class="hide">
<p>This is 222</p>
</div>
<div id="333" class="hide">
<p>This is 333</p>
</div>
<div id="444" class="hide">
<p>This is 444</p>
</div>
<div id="555" class="hide">
<p>This is 555</p>
</div>
JS
$(function() {
$('.hide').hide();
$("input[type='radio']").on("change", function() {
// Hide all the .hide divs
$('.hide').hide();
var checked = $(this).val();
if (checked == "111") {
$("#111").show();
} else if (checked == "222") {
$("#222").show();
} else if (checked == "333") {
$("#333").show();
} else if (checked == "444") {
$("#444").show();
} else if (checked == "555") {
$("#555").show();
}
});
});
I think this is what you're looking for.
//removed the colon before input
$("input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
//get the value of the checked input
var value = $(this).val();
//match the index to the input and show it, hide the others.
$('#'+value).show().siblings().hide();
}
}
This assumes that the choice array has all the values from the the inputs.
Make sure the id's of the radio buttons are unique.(You already have the same name for the radio button to make it behave like a group.)
Then target the div using the value of the radio button.
JS
$(":input[type='radio']").on("change", function() {
// Hide all the divs
$('.div-container div').hide();
if ($(this).prop("checked")) {
$("#" + $(this).val()).show();
}
});
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id1" name="repl_name" type="radio" value="111">
<label for="repl_id1">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id2" name="repl_name" type="radio" value="222">
<label for="repl_id2">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id3" name="repl_name" type="radio" value="333">
<label for="repl_id3">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id4" name="repl_name" type="radio" value="444">
<label for="repl_id4">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id5" name="repl_name" type="radio" value="555">
<label for="repl_id5">Pay with cash.</label>
</div>
</fieldset>
<div class="div-container">
<div id="111">
<p>This is 111</p>
</div>
<div id="222">
<p>This is 222</p>
</div>
<div id="333">
<p>This is 333</p>
</div>
<div id="444">
<p>This is 444</p>
</div>
<div id="555">
<p>This is 555</p>
</div>
</div>
Check Fiddle