I have been stuck with a code for a few days, and what I'm really trying to do is to append NEXT and PREVIOUS (link/button) on a radio button.
<div id="slides">
<ul class="options-list">
<li>
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</ul>
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
what I am trying to do here is that, when i click on next, it will select the radio button below it, so the code above has bundle-73, bundle-72 and bundle-74, says if the default selected is bundle-73, when i click next, it should select bundle-72.
Your HTML looks broken so I'm going to assume you really mean this:
<div id="slides">
<ul class="options-list">
<li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73"></li>
<li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
<li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
</ul>
</div>
Then your next action would look like this:
$('#next').click(function() {
var $all = $('.getradiotomove'); // Get them all
var $current = $('.getradiotomove:checked'); // Get the current one
var index = $all.index($current) + 1; // Find the index of the next one
if(index >= $all.length) // Wrap around at the end
index = 0;
$($all[index]).attr('checked', 'checked'); // Check it.
});
Demo: http://jsfiddle.net/ambiguous/hTgv3/1/
This assumes that you only have the one group of radio buttons.
You should be able to sort out the previous action yourself.
References:
:checked selector
index function
Maybe somethining like this?
<ul class="options-list">
<li>
<input type="radio" name="bundle_option" value="73">
</li>
<li>
<input type="radio" name="bundle_option" value="72">
</li>
<li>
<input type="radio" name="bundle_option" value="74">
</li>
</ul>
and javascript:
$('#next').click(function(){
$('[name=bundle_option]:checked').parent().next().children('[name=bundle_option]').attr('checked', true);
return false;
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#next').click(function() {
var checkedOp = $('input[name=bundle_option]:checked')
var match = checkedOp.next('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').next('input[name=bundle_option]').attr('checked', 'checked');
});
$('#prev').click(function() {
var checkedOp = $('input[name=bundle_option]:checked');
var match = checkedOp.prev('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').prev('input[name=bundle_option]').attr('checked', 'checked');
});
}
);
</script>
</head>
<body>
<div id="slides">
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked="checked">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
</body>
</html>
Related
I'm using this code that I found online, but it's not working completely the way I want it to.
Basically I am wanting check boxes to hide divs based on the users selection.
I am building an allergens advice page for a restaurant. When a guest selects the allergens they have I want it to hide the dishes that they cannot have.
The above code works perfectly if the guest has one allergen. It hides the div. If they select more than one then the box will reappear.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.
</div>
<ul>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
</ul>
I'm guessing it's doing it because the code is toggling, but I don't know of any other code to prevent that.
Your help would be greatly appreciated.
I just copied further code from the link
What is happening here is just checkbox from ks-cboxtags class will be affected so any other checkbox will not have this functionality.
when you click on this it will displays div and if its selected div will be hide.
check below snippet for more details.
$(document).ready(function() {
$(".test").click("test"); //ignore this
$(".ks-cboxtags input").click(function() {
$("."+$(this).val()).show();
$(".ks-cboxtags input:checked").each(function() {
$("."+$(this).val()).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main class="inline-block-center">
<div class="selectt Gluten" style="display: block;">
<strong style="font-size: 18px;">MEXICAN POPPADOMS</strong><br> Crispy blue corn tortillas with roasted tomato salsa, habanero & pepper salsa, green tomatillo & jalapeño salsa.</div>
<div class="selectt Eggs Gluten" style="display: block;">
<strong>PAO DE QUEIJO</strong><br> Traditional Brazilian cheese dough balls served with chipotle butter.</div>
<div class="selectt Gluten" style="display: block;">
<strong>PERUVIAN BOTIJA OLIVES</strong><br> In a herby marinade.</div>
<div class="selectt Milk Gluten" style="display: block;">
<strong>TEQUENOS</strong> <br> A popular Venezuelan street food; cheese filled fried bread sticks served with chipotle butter.</div>
</main>
<ul class="ks-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Gluten">
<label for="checkboxOne"> Gulten</label>
</li>
<li>
<input type="checkbox" id="checkboxTwo" value="Crustaceans">
<label for="checkboxTwo"> Crustaceans</label>
</li>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkboxFour" value="Fish">
<label for="checkboxFour"> Fish</label>
</li>
<li>
<input type="checkbox" id="checkboxFive" value="Peanuts">
<label for="checkboxFive"> Peanuts</label>
</li>
<li>
<input type="checkbox" id="checkboxSix" value="Soy Beans">
<label for="checkboxSix"> Soy Beans</label>
</li>
<li>
<input type="checkbox" id="checkboxSeven" value="Milk">
<label for="checkboxSeven"> Milk</label>
</li>
<li>
<input type="checkbox" id="checkboxEight" value="Tree Nuts">
<label for="checkboxEight"> Tree Nuts</label>
</li>
<li>
<input type="checkbox" id="checkboxNine" value="Celery">
<label for="checkboxNine"> Celery</label>
</li>
<li>
<input type="checkbox" id="checkboxTen" value="Mustard">
<label for="checkboxTen"> Mustard</label>
</li>
<li>
<input type="checkbox" id="checkboxEleven" value="Seasame">
<label for="checkboxEleven"> Seasame</label>
</li>
<li>
<input type="checkbox" id="checkboxTweleve" value="Sulphur">
<label for="checkboxTweleve"> Sulphur</label>
</li>
<li>
<input type="checkbox" id="checkboxThirteen" value="Lupin">
<label for="checkboxThirteen"> Lupin</label>
</li>
</ul>
Your code throws unexpected end of input, you are missing closing parentheses for $(document).ready():
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
In the case of multiple checkboxes that refer to the same product that should stay hidden:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).val();
if($(this).is(':checked')){
$("." + inputValue).hide();
}else{
$("." + inputValue).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkbox4" value="Gluten">
<label for="checkbox4"> Gluten</label>
</li>
I've rewritten the code without jQuery, as it doesn't seem to need it...
Here is the pen: https://codepen.io/paulmartin91/pen/ExjgQBJ?editors=1011
JS
//object containing each allergen. Add them to this object when adding them to the list - always set to false as default
let choices = {
Eggs: false,
Gluten: false
}
let clickedBox = (input) => {
//mark the selected allergen as checked
choices[input.value] = input.checked
//returns an array of classes for each element with the selected allergen
let selected = document.getElementsByClassName(input.value)
//iterates though array of elements with selected allergen
for (let i = 0; i < selected.length; i++) {
//creates an array of classes for each element
var classList = selected[i].className.split(' ')
var counter = 0
classList.forEach(x=>{
//if the element contains a class that is checked, hide it
if (choices[x]) {selected[i].style.display = 'none'} else{
//count the number of classes that aren't checked
counter++
//if the element has no classes that are checked, show it
if (counter == classList.length) {selected[i].style.display = 'block'}
};
})
}
};
HTML
<div class=" Eggs Gluten">
<strong>Eggs Gluten</strong>
</div>
<div class="Eggs ">
<strong>Eggs</strong>
</div>
<div class="Gluten ">
<strong>Gluten</strong>
</div>
<li>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxOne"
value="Eggs">
<label for="checkboxOne"> Eggs</label>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxTwo"
value="Gluten">
<label for="checkboxTwo"> Gluten</label>
</li>
It now iterates through all the elements that match the class and hide/show them based on the condition of the checked box.
Hope this helps!
Edit: fixed code, should work now!
I would like to be able to select a radio button when clicking on "label" and then pass that value to the URL.
Here's the URL Prefill code below.
It works if you select the actual radio button. However, I realized that if you click on label it doesn't select the radio button.
So i added this top part jquery code to solve that issue. However, it doesn't pass the value to the URL.
I'd like to stylize radio buttons by hiding input part and adding pseudoclasses. so i wonder if there's a way to pass radio button value when label is clicked on?
$(function(){
$('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);});
});
/* URL Prefill Code */
var form = document.getElementById('form-product-choices');
form.addEventListener('change', function(e){
var actionUrl = 'https://example.com/';
var radioButtons = document.getElementsByName('product-choice');
for( var i = 0; i < radioButtons.length; i++ ) {
if( radioButtons[i].checked ) {
actionUrl += '?product-choice=' + radioButtons[i].value;
break;
}
}
document.getElementById('action-link').href = actionUrl;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li><label for="radio"><input type='radio' name='product-choice' value='regular' /> regular</label></li>
<li><label for="radio"><input type='radio' name='product-choice' value='double' /> double</label></li>
<li><label for="radio"><input type='radio' name='product-choice' value='max-xl' /> xl</label></li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href=''>Click to continue</a>
</section>
</main>
</form>
First of all, we don't need JQuery code for select the radio button when clicking the label. Instead of this you can able to use below code,
<label for="regular">
<input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>
For achieving this, Need to set the ID attribute in textbox and use that ID attribute value on label 'for' attribute.
Below, I have added a full code. Hope this will help.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li>
<label for="regular">
<input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>
</li>
<li>
<label for="double">
<input type='radio' name='product-choice' value='double' id="double" /> double
</label>
</li>
<li>
<label for="xl">
<input type='radio' name='product-choice' value='max-xl' id="xl" /> xl
</label>
</li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href='javascript:void(0)'>Click to continue</a>
</section>
</main>
</form>
<script type="text/javascript">
$("#action-link").click(function(){
var getVal = $('input[name=product-choice]:checked').val();
window.location.href='https://example.com/test.cfm?product-choice='+getVal;
});
</script>
On the label, associate the for attribute with a corresponding id on each of the radio buttons. The ids should be unique between them.
$(function(){
$('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);});
});
/* URL Prefill Code */
var form = document.getElementById('form-product-choices');
form.addEventListener('change', function(e){
var actionUrl = 'https://example.com/';
var radioButtons = document.getElementsByName('product-choice');
for( var i = 0; i < radioButtons.length; i++ ) {
if( radioButtons[i].checked ) {
actionUrl += '?product-choice=' + radioButtons[i].value;
break;
}
}
document.getElementById('action-link').href = actionUrl;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li><label for="regular"><input id="regular" type='radio' name='product-choice' value='regular' /> regular</label></li>
<li><label for="double"><input id="double" type='radio' name='product-choice' value='double' /> double</label></li>
<li><label for="max"><input id="max" type='radio' name='product-choice' value='max-xl' /> xl</label></li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href=''>Click to continue</a>
</section>
</main>
</form>
I've been trying for a long time to make a button appear on a webpage and make the link that button goes to change depending on the radio button selected. However, so far nothing appears on my web page except for the radio buttons.
This is my code so far:
<div id="quick-book">
<script>
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div name ="button">
</div>
</div>
I hope someone here can help guide me in the right direction!
You should add a function in you code and add it when click in the radio.
Something like this:
<script>
function myFunction() {
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div id="button">
</div>
</div>
And change name="button" to id="button"
First, your <script> is executed only once, not on every radio button change. And since initially nothing is checked, script does nothing. Moreover, when this script is executed, elements below are not rendered yet. You need to:
1) Move the script down, below all your divs.
2) Create a change callback to check radio buttons values
<div id="quick-book">
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="change(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="change(this)">Hotel<br>
</form>
<div id ="button">
</div>
</div>
<script>
function change(radio) {
if (radio.checked && radio.id === "radio-restaurant") {
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<script>
function checkRadio(radio) {
if (radio.id === "radio-restaurant"){
document.getElementById("button-div").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button-div").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="checkRadio(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="checkRadio(this)">Hotel<br>
</form>
<div id="button-div">
</div>
</div>
Try this:
<div id="quick-book">
<script>
function $(e) {
//Just something I have found useful
return document.getElementById(e);
}
function rb_onchange(s) {
//First clean up
$("button").innerHTML = '';
//The id is added because both radio buttons
//will fire this event when one changes
//So to prevent both both conditions firing you have to add this additional condition
if (s.checked && s.id == "radio-restaurant") {
//If the radio button is checked and the id of
//said radio button is the restaurant one then add the innerHTML
$("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
}
else if (s.checked && s.id == "radio-hotel") {
//If the radio button is checked and the id of
//said radio button is the hotel one then add the innerHTML
$("button").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="rb_onchange(this);">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="rb_onchange(this);">Hotel<br>
</form>
<div name ="button"></div>
</div>
EDIT:
Seems I failed to notice the id attribute of the button div.,....
Change:
<div name ="button"></div>
to
<div name="button" id="button"></div>
EDIT:
Adding some comments
$(document).ready(function ()
{
$("#watch-me").click(function()
{
$("#show-me:hidden").show('slow');
$("#show-me-two").hide();
$("#show-me-three").hide();
});
$("#watch-me").click(function()
{
if($('watch-me').prop('checked')===false)
{
$('#show-me').hide();
}
});
$("#see-me").click(function()
{
$("#show-me-two:hidden").show('slow');
$("#show-me").hide();
$("#show-me-three").hide();
});
$("#see-me").click(function()
{
if($('see-me-two').prop('checked')===false)
{
$('#show-me-two').hide();
}
});
$("#look-me").click(function()
{
$("#show-me-three:hidden").show('slow');
$("#show-me").hide();
$("#show-me-two").hide();
});
$("#look-me").click(function()
{
if($('see-me-three').prop('checked')===false)
{
$('#show-me-three').hide();
}
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<div class="col-sm-12" align="center">
<form id='form-id'>
<input id='watch-me' name='test' type='radio' checked /> Radio 1
<input id='see-me' name='test' type='radio' /> Radio 2
<input id='look-me' name='test' type='radio' /> Radio 3
</form>
<br><br>
<div id='show-me'>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div>
</div>
</div>
<div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div>
<div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div>
</div>
</div>
I have a code of multiple radio buttons (nested in tabs) and I need to save and restore all values locally. I tried with cookies but only one value was saved. I tried with "localStorage" but I think I need some help. The basic idea is to save the values on each click and restore them on "window.onload".
If it is easier I can go back to cookies! Any experience anyone? Thank you in advance.
<html>
<head>
<title>Saving RadioButtons locally</title>
</head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="scripts/modernizr.js"></script>
<script type="text/javascript">
//this function runs everytime there is a click from the mouse to update and save the radio values (logicaly)
function saveState() {
//gets every object from the main form to read and save it.
localStorage.setItem("flag", "set");
var data = $("#mainform").serializeArray();
$.each(data, function(i, obj) {
localStorage.setItem(obj.name, obj.value);
});
console.log(data); //console shows only one object which is the first one (pid) with one value
}
//this function must be run each time the window loads to initialize the radio values (logicaly)
function onloadfunction() {
if (localStorage.getItem("flag") == "set") {
//gets every object from the main form to read and restore it.
var data = $("#mainform").serializeArray();
$.each(data, function(i, obj) {
$("[name='" + obj.name +"']").val(localStorage.getItem(obj.name));
});
}
}
window.onload=onloadfunction;
window.onbeforeunload=saveState;
//end of ideas...............
</script>
<body>
<form id="mainform" name='mainform'>
<div id="container" class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Cid">Cid</a></li>
<li><a data-toggle="tab" href="#Bid">Bid</a></li>
<!-- first tab -->
<!-- first radio box in first tab -->
</ul>
<div class="tab-content">
<div id="Cid" class="tab-pane fade in active">
<form name='pid'>
<input type="radio" id="p40" name="p" value="40">40
<input type="radio" id="p45" name="p" value="45">45
<input type="radio" id="p50" name="p" value="50">50
</form>
<!-- second radio box in first tab -->
<form name='BName'>
<input type="radio" id="B40" name="B" value="40">40
<input type="radio" id="B45" name="B" value="45">45
</form>
</div>
<!-- second tab -->
<!-- first radio box in second tab -->
<div id="Bid" class="tab-pane fade">
<form name='HName'>
<input type="radio" id="H40" name="H" value="40">40
<input type="radio" id="H45" name="H" value="45">45
<input type="radio" id="H50" name="H" value="50">50
</form>
</div>
</form>
</body>
I have a checkbox that will select all, at the moment if I press it, it will select all the the options(which is good!), then if I deselect one of them it doesn't deselect the Select All option. Any help in how to do this would be gratefully appreciated.
<span class="glyphicon glyphicon-check"></span>
<label for="sel1">Select days:</label><br />
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>
</div>
Script I am currently using to Select All:
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
});
$(document).ready(function){
}
Example:
http://jsfiddle.net/0e018w0y/
You're most of the way there.
I'd attach a "change" event listener to all the checkboxes, confirming that (on change) whether all the checkboxes are selected or not... (FYI you're using checkboxes and not radio buttons. Radio buttons only allow 1 to be selected at a time.)
// On change of any (not "Select All" checkbox)
$('input[name="selected[]"]').change(function () {
var selectAll = true;
// Confirm all checkboxes are checked (or not)
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', selectAll);
});
In the example I've tried to follow your convention for checking if things are selected or not etc - except I've used "change()" rather than "click()" (which captures any change event, not just mouse-clicks).
Line by line:
$('input[name="selected[]"]').change(function () {
...
}
This captures the change event on all select boxes. You could use classes or a name convention to identify the checkboxes to attach it to.
var selectAll = true;
The scope of this variable reaches the nameless function provided to the .each(...) call which follows. We're using this to track whether every checkbox is checked or not.
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
This checks every checkbox, see if any are not checked.
Then we update the "Select All" checkbox appropriately.
Looking at it again (2 minutes later), I can see this could be reduced actually:
var allSelected = ($('input[name="selected[]"]:not(:checked)').length === 0);
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', allSelected);
I've not tested if this is faster ... I've just offloaded the checking of "is checked" to jQuery itself. The "length" property returns how many elements match the criteria - ":not(:checked)" does what you'd expect, matches only the aforementioned inputs which are not checked.
If the count is not equal to 0, we deselect the "Select All" checkbox.
Example:
http://jsfiddle.net/zyxgm2kz/
Try this:
You need to bind a change listener for all the days checkbox and if all the checkboxes are checked then you can play with select all checkbox checked property.
$(document).ready(function () {
var allCB = $('input[name="selected[]"]');
var mainCB = $('input[name="all"]')
mainCB.on('click', function () {
var status = $(this).is(':checked');
allCB.prop('checked', status);
});
allCB.on('change', function () {
var status = $('input[name="selected[]"]:checked').length === allCB.length;
$('input[name="all"]').prop('checked', status);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>
you can try this one:
$(document).ready(function() {
$('input[name="all"],input[name="title').click(function(event) { //on click
if(this.checked) {
$('input[type="checkbox').each(function() {
this.checked = true;
});
}else{
$('.input[type="checkbox').each(function() {
this.checked = false;
});
}
});
});
DEMO FIDDLE
$('input[name="all"],input[name="title"]').bind('click', function () {
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
var checkbox = $(':checkbox').not('#all');
$(checkbox).change(function () {
checkbox.each(function () {
if ($(this).is(':checked')) {
} else {
$(':checkbox#all').prop('checked', false)
}
})
})
Get the checkbox except the all then check if one is uncheck remove the check from all
DEMO