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>
Related
I would like to have the possibility with javascript to deselect checkbox "demo2" when I deselect checkbox "demo1".
only deselect
<input type="checkbox" name="demo1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car">
<label for="vehicle2"> I have a car</label><br>
I gues you just want to have "radio" like behaviour.
You can see below how it can be done with pure JS.
<html>
<body>
<script>
function switcher(obj) {
if(obj.checked == true) {
document.getElementsByName('demo2')[0].checked = false;
document.getElementsByName('demo1')[0].checked = false;
obj.checked= true
}
}
</script>
<input type="checkbox" name="demo1" value="Bike" onclick="switcher(this)">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car" onclick="switcher(this)">
<label for="vehicle2"> I have a car</label><br>
</body>
</html>
This code should prohibit clicking more than two radiobuttons in total (there are three groups of such buttons).
This works when there is no container 'label', but when it is, it doesn't work (it looks like that 'if' construct is not working; everything that is written outside of it works fine)
how to make it work without removing the label? Is there any solutions?
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).siblings(':checked').length >= radio_limit) {
this.checked = false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-levels-3">
<p><strong>Select 2 Levels</strong></p>
<label>
<input type="radio" name="vehicle" value="1">Level 1<br>
<input type="radio" name="vehicle" value="2">Level 2<br>
<input type="radio" name="vehicle" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle2" value="1">Level 1<br>
<input type="radio" name="vehicle2" value="2">Level 2<br>
<input type="radio" name="vehicle2" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle3" value="1">Level 1<br>
<input type="radio" name="vehicle3" value="2">Level 2<br>
<input type="radio" name="vehicle3" value="3">Level 3<br>
<br>
</label>
</div>
You are looking for siblings, which they were without labels. Now with labels they are not sibling they are cousins. To fix we read all radio buttons in same div using closest(). Also use prop to check a radio button. Do this:
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).closest('div').find('input:checked').length >= radio_limit) {
$(this).prop('checked', false);
};
});
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>
i got simple form what contain radio input and text input.
My goal is: check radio input when click on text input
Thanks
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
You should have unique id for the input and radio then you can associate a click event in input by its id that will check radio input when click.
using jQuery
$('#gr_1_input_4').click(function(){
$('#gr_1_option_4').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
using JavaScript
document.getElementById('gr_1_input_4').addEventListener('click', function(){
document.getElementById("gr_1_option_4").checked = true;
});
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
You can have focus event handler for input text and inside it set checked property of the radio button.
NOTE: Don't use same id for multiple html elements as it will end up with javascript / jquery not working for id oriented code. You have used gr_1_option_4 as id for both radio and text input.
$(function(){
$("input[type=text][name=group1]").on("focus", function(){
$("input[type=radio][name=group1]").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
Firstly change your Element's Id , you cant have same ids among elements.
Secondly you can add an event handler like
document.getElementById("textId").onclick = function() {myFunction()};
and define that function like
function myFunction() {
document.getElementById("radioButtonID").checked = true;
}
EDIT: I FILL THE ANSWER AND SEE THAT ALREADY SOMEONE HAD ASNWERED but i keep my answer because is not Jquery like the other
One alternative way is using prev .
$('input[type="text"]').click(function(){
$(this).prev('input[type="radio"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
I have two "groups" of checkboxes (although the first group only contains one checkbox), but if user checks the checkbox from the first group I want to restrict the ability of checking the checkboxes from second group...
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" />If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
</div>
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" id='Grp1'/>If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#Grp1').change(function() {
if($(this).is(":checked"))
{
$('.Grp2').prop('disabled', true);
}
else
{
$('.Grp2').prop('disabled', false);
}
});
</script>
I've used a simple jQuery script to solve it.
initially it didn't exactly do what I wanted it to do, but I've managed to work around it with php as I had to make sure that if someone checked the checkbox from the second group that it didn't go to the database.
$('#checkbox1').click(function() {
if( $(this).is(':checked')) {
$("#checkbox2").hide();
} else {
$("#checksbox2").show();
}
});
As for php I simply used a ternary operator to make sure that if checkbox with id checkbox1 is checked then I want to ignore the rest of the checkboxes...
$smnrs = !empty($_POST['all']) ? explode(';', $_POST['all']) : $_POST['seminars'];
in this case $_POST['all'] refers to the first checkbox that if clicked it hides the div holding the other checkboxes.