In my page there are several Div that hold rating point and also some checkbox. Basically i want based on checkbox selection Div rating will show.i don't know how do that through jquery.
for Example
<div id="ratingbox">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
<div id="chkbox">
<input type="checkbox" class="ratingCheckbox" value="1" onclick="selection()">1
<input type="checkbox" class="ratingCheckbox" value="2" onclick="selection()">2
<input type="checkbox" class="ratingCheckbox" value="3" onclick="selection()">3
<input type="checkbox" class="ratingCheckbox" value="4" onclick="selection()">4
<input type="checkbox" class="ratingCheckbox" value="5" onclick="selection()">5</div>
LINK
if checkbox 1 is checked, span with value 1 will be visible and all others will be hidden, If checkbox 1 and 4 are checked span with value 1 and span with value 4 are only visible and rest are hidden. if no checkbox is checked then all are visible.
You can do something like this
$('.ratingCheckbox').on('click', function(){
$('span:contains('+this.value+')').toggle();
});
And hide the spans by default with this in css display: none;
Check the demo here http://jsfiddle.net/dhirajbodicherla/dnyfmhyx/4/
Update
Try something like this
var checkbox = $('.ratingCheckbox').on('change', function () {
var val = checkbox.map(function (index, el) {
return (el.checked) ? +$(el).val() : undefined;
}).get(); // this will get the list of checked values in an array like this - [1,4]
if (val.length > 0) { // if at least one checkbox is checked
$('span').hide(); // hide all
$('span').filter(function (index, el) { // this will get all the spans which have value 1 and 4 from the above array
return $.inArray(+$(el).text(), val) != -1 ? el : undefined;
}).show(); // show the ones that are checked
} else {
$('span').show(); // if no checkbox is checked show everything
}
});
Here is a demo http://jsfiddle.net/dhirajbodicherla/dnyfmhyx/5/
I give the spans display: none; when the corresponding checkbox is check I add .visible class to them:
#ratingbox > span {
/* other styles */
display: none;
}
#ratingbox > span.visible {
display:inline-block;
}
In the jQuery part we just need to get the value of the new changed checkbox and toggle the visible class of corresponding spans (I used onchange instead of onclick):
$('#chkbox > input[type=checkbox]').on('change', function() {
var val = $(this).val();
$('#ratingbox > span').each(function() {
if($(this).text() == val)
$(this).toggleClass('visible');
});
});
jsfiddle DEMO
Related
I want to set values of selected checkbox to text input
For example: see this image Click
Problem is when i click "Select All" checkbox "child" checkboxes are checked but value not set in textbox and values set when i uncheck the "Select All" checkbox
I want to get checkbox values in array so i am using map function,
Please see jquery on fiddle
fiddle here
HTML CODE
<form action="" id="form">
<input type="checkbox" id="selectAll">
<label for="selectAll">Select All</label><br>
<div class="child">
<input type="checkbox" class="selectCb" value="1" id="one">
<label for="one">One</label><br>
<input type="checkbox" id="two" class="selectCb" value="2">
<label for="two">Two</label><br>
<input type="checkbox" class="selectCb" value="3" id="three">
<label for="three">Three</label><br>
</div>
<input type="text" id="textBox">
</form>
EDIT
Both codes are working
$(document).on("click", "#selectAll", function () {
var chkAll = $(".child input[type='checkbox']:checked").map(function() {
return $(this).val();
}).get();
$("#textBox").val(chkAll.join(' '));
});
Check on fiddle fiddle 2
$(document).on("change", "#selectAll", function () {
var chkAll = $(".child input[type='checkbox']").prop('checked', this.checked).map(function () {
return $(this).val();
}).get();
$("#textBox").val(chkAll.join(' '));
});
check on fiddle fiddle 3
Now my doubt is which one is better and correct ?
because i want to set background image for all checkbox, so I hide all checkboxes using css
#form input[type="checkbox"] {
display: none;
}
And set background image for checkbox using following css code
Set Background for "Select All" Checkbox
input[type="checkbox"]#selectAll + label#selectAllLbl::before {
content: '';
background: url('http://s30.postimg.org/uhql9zd5p/chk_uncheck.png') no-repeat;
height: 22px;
width: 22px;
display: inline-block;
margin-right: 10px;
}
input[type="checkbox"]#selectAll:checked + label#selectAllLbl::before {
content: '';
background: url('http://s9.postimg.org/6k81psojf/chk_enabled.png') no-repeat;
}
Set Background for "child" Check boxes
input[type="checkbox"].selectCb + label.childLbl::before {
content: '';
background: url('http://s30.postimg.org/uhql9zd5p/chk_uncheck.png') no-repeat;
height: 22px;
width: 22px;
display: inline-block;
margin-right: 10px;
}
input[type="checkbox"].selectCb:checked + label.childLbl::before {
content: '';
background: url('http://s9.postimg.org/6k81psojf/chk_enabled.png') no-repeat;
}
so is it right ? to use hidden checkbox id and class in jquery
<input type="checkbox" id="selectAll">
<input type="checkbox" class="selectCb" value="1" id="one">
Switch change to click in the second argument:
$(document).on("change", ".selectCb", function () {
var values = $(".child input[type='checkbox']:checked").map(function() {
return $(this).val();
}).get();
$("#textBox").val(values.join(' '));
});
$(document).on("click", "#selectAll", function () {
var chkAll = $(".child input[type='checkbox']:checked").map(function() {
return $(this).val();
}).get();
$("#textBox").val(chkAll.join(' '));
});
If you want the selectAll to toggle the checks on other checkboxes use prop() to do it. Using this.checked will indicate whether to check or uncheck them
$(document).on("change", "#selectAll", function () {
var chkAll = $(".child input[type='checkbox']").prop('checked', this.checked).map(function () {
return $(this).val();
}).get();
$("#textBox").val(chkAll.join(' '));
});
DEMO
Instead of hiding checkbox you can assign negative margin to it.
Please refer below CSS snippet :
#form {overflow:hidden}
#form input[type="checkbox"]{
margin-left:-25px
}
Also want to repeat what jonmrich has already said to switch "change to click" in the second argument for "#selectAll" checkbox.
Thanks
I am generating 5 checkboxes dynamically. I can select upto 3 checkboxes. Once 3 checkboxes are selected, If I try to select one more checkbox it should give an alert and once i click ok on the alert box the fourth checkbox that I have selected should be unchecked.
Code I am using for generating checkboxes dynamically
$("#catalog_table").append('<tr><td style="width:10%; background-color:#fcfbf6; font-family:Proxima Nova Regular; font-size:11pt; font-color:#443b33;text-align: center;">'+productCatalog[i].productCode+'</td><td style="width:10%; background-color:#fcfbf6; text-align: center;font-family:Proxima Nova Regular; font-size:11pt; font-color:#443b33;">'+productCatalog[i].productName
+'</td><td style="width:10%; background-color:#fcfbf6; font-family:Proxima Nova Regular; font-size:11pt; font-color:#443b33; text-align: center;"><input type="checkbox" style="background-color:#fcfbf6;" name="chkOccupancy" class="chkbox" value='+productCatalog[i].productCode+'></td></tr>');
I tried number of ways...but all are getting unchecked.Can anyone tell me how to do this.
This should work for you
$(document).ready(function () {
$(':checkbox').click(function() {
if($(':checkbox:checked').length > 3){
alert('you can not check more than 3 checkboxes');
$(this).prop('checked',false);
}
});
})
Try this example:
$(function () {
$(document).on('change', 'input[name=chkOccupancy]', function (e) {
var chk = $(this);
var cnt = $('input[name=chkOccupancy]:checked').length;
if(3 < cnt) {
chk.prop('checked', false);
alert('Not more than 3 !');
}
e.stopPropagation();
});
});
As an alternative, here's a non–jQuery option. You can put a single listener on an an ancestor element, say a div, and prevent a fourth checkbox from being checked:
function checkCBs(e) {
var el = e.target;
if (el.type == 'checkbox' && document.querySelectorAll('input:checked').length > 3) {
el.checked = false;
}
}
You might want to qualify the selector to keep it within the div or for inputs with a particular class. Sample markup:
<div onclick="checkCBs(event)">
<label for="cb0">stuff<input type="checkbox" name="cb0" id="cb0">0</label><br>
<label for="cb1">stuff<input type="checkbox" name="cb1" id="cb1">1</label><br>
<label for="cb2">stuff<input type="checkbox" name="cb2" id="cb2">2</label><br>
<label for="cb3">stuff<input type="checkbox" name="cb3" id="cb3">3</label><br>
<label for="cb4">stuff<input type="checkbox" name="cb4" id="cb4">4</label><br>
</div>
I have custom filtering jQuery, the function is when the checkbox was checked it showing the rel value from the checkbox on div with class filter.
Meanwhile the div filter has default text write "Please choose".
What I need is when someone chooses the checkbox and then clicks the "Clear all" button it will clear the checked value, but at current state the default text from div filter "Please choose" does not appear again after clearing result.
Here is the Html code:
<div class="check">
<label><input type="checkbox" rel="A" name="A"/>a</label>
<label><input type="checkbox" rel="B" name="B"/>b</label>
<label><input type="checkbox" rel="C" name="C"/>c</label>
<label><input type="checkbox" rel="D" name="D"/>d</label>
<button class="clear -filter"onclick="$('input:checkbox').removeAttr('checked');
$('.results > div').show();
$('.textTrigger').html('');" type="reset" value="Clear all">Clear all</button>
</div>
<div class="filter">
<p class="textTrigger">Please choose</p>
</div>
Here is the jQuery:
$('div.check').delegate('input[type="checkbox"]', 'change', function()
{
var $lis = $('.results > div'),
$checked = $('input:checked');
var rels = [];
$checked.each(function()
{
rels.push($(this).attr('name'));
});
$('.textTrigger').html(rels.join(', '));
if ($checked.length)
{
var selector = $checked.map(function()
{
return '.' + $(this).attr('rel');
}).get().join('');
$lis.hide().filter(selector).show();
}
else
{
$lis.show();
}
});
And this is the link to fiddle http://jsfiddle.net/nucleo1985/LugPX/
Get rid of the onclick attribute on the button, it's not clean code. You're already using jQuery so I suggest you stick to that and move the JS logic away from inside the DOM element
Also use the $.fn.on function instead of delegate
And use this ..
$('button').on('click', function () {
$('input:checkbox').removeAttr('checked');
$('.results > div').show();
$('.textTrigger').html('Please choose');
});
JSFIDDLE
Basically, I want 8 radio buttons. And if one radio button is selected then a div is shown below. If another button is selected another div is shown. Only one div shown at a time and if no button selected (initially) then no divs shown.
This is my HTML which is fairly standard, I'm not trying to improve this for what I need.
<form id='group'>
<label><input type="radio" name="group1" class="sim-micro-btn"/></label>
<label><input type="radio" name="group1" class="sim-mini-btn"/></label>
<label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
<label><input type="radio" name="group1" class="sim-mega-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>
<div class="billpay-internet-add-ons">
<div class="sim-micro-desktop">sim-micro</div>
<div class="sim-mini-desktop">sim-mini</div>
<div class="sim-maxi-desktop">sim-maxi</div>
<div class="sim-mega-desktop">sim-mega</div>
<div class="phone-smart-micro-desktop">phone-smart-micro</div>
<div class="phone-smart-mini-desktop">phone-smart-mini</div>
<div class="phone-smart-desktop">phone-smart</div>
<div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>
However this is my script and it seems fairly hectic and I'm wondering before I move on is there a way to do this a bit more simple?
$(document).ready(function(){
$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();
$('form#group').click(function(){
if($('.sim-micro-btn').is(":checked")){
$('.sim-micro-desktop').show();
} else {
$('.sim-micro-desktop').hide();
}
if($('.sim-mini-btn').is(":checked")){
$('.sim-mini-desktop').show();
} else {
$('.sim-mini-desktop').hide();
}
if($('.sim-maxi-btn').is(":checked")){
$('.sim-maxi-desktop').show();
} else {
$('.sim-maxi-desktop').hide();
}
if($('.sim-mega-btn').is(":checked")){
$('.sim-mega-desktop').show();
} else {
$('.sim-mega-desktop').hide();
}
if($('.phone-smart-micro-btn').is(":checked")){
$('.phone-smart-micro-desktop').show();
} else {
$('.phone-smart-micro-desktop').hide();
}
if($('.phone-smart-mini-btn').is(":checked")){
$('.phone-smart-mini-desktop').show();
} else {
$('.phone-smart-mini-desktop').hide();
}
if($('.phone-smart-btn').is(":checked")){
$('.phone-smart-desktop').show();
} else {
$('.phone-smart-desktop').hide();
}
if($('.phone-smart-maxi-btn').is(":checked")){
$('.phone-smart-maxi-desktop').show();
} else {
$('.phone-smart-maxi-desktop').hide();
}
});
});
Firstly put shared classes on both the radio buttons and the div elements which show the content. In my example I've used trigger and content respectively. Then add a data attribute to the radio to identify which div should be shown on click.
Shortened example:
<form id='group'>
<label>
<input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
</label>
</form>
<div class="billpay-internet-add-ons">
<div class="sim-micro-desktop content">sim-micro</div>
</div>
Then you only need 1 click handler like this:
$(document).ready(function(){
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
You can also then use CSS to hide the div elements without jQuery - styling should always be done in CSS anyway as it's a much better separation of concerns.
.content {
display: none;
}
Example fiddle
You can hide the div elements using CSS:
.billpay-internet-add-ons div {
display: none;
}
Then you can use the className of the target to determine which div to show, hiding all sibling elements:
$('form#group').click(function(e) {
var className = e.target.className.replace('btn', 'desktop');
$('.' + className).show().siblings().hide();
});
Here's a fiddle
use html5 data attribute)(i.e data-mappingclass ) pointing to corresponding div you need to show. add same class to all radio button(ie radioClass).
HTML
<label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
<label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
... //same for others
JS
$('.radioClass').click(function() {
$('.billpay-internet-add-ons div').hide();
if(this.checked){
$('.' + $(this).data('mappingclass').show();
}
});
You could use selectors to reduce the number of lines of code here.
$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();
Could be shortened to:
$('.billpay-internet-add-ons div').hide();
This uses the parent element to group those elements you want to hide, rather than repeating the request for each one.
Similarly, you can use your naming convention to map the items to the elements to show and hide - here is the full working example:
$(document).ready(function(){
$('.billpay-internet-add-ons div').hide();
$('form#group').click(function(){
$('#group input').each(function() {
var item = $(this);
var isChecked = item.is(':checked');
var name = item.attr('class').replace("-btn", "-desktop");
if (isChecked) {
$('.' + name).show();
} else {
$('.' + name).hide();
}
});
});
});
This example is purely based on your HTML without any changes. See it working here.
You could simplify this further if you didn't need to transform the names. You could use a data-attribute instead of changing the class names to do this.
var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
$billpay.find("div").hide();
$billpay.find("div:eq("+$(this).parent().index()+")").show();
});
http://jsfiddle.net/KaF77/2/
I simplified it some four you. Basically you look which index the radio clicked has and then show a div with the same index. So the position of the divs has to match the radios.
Your HTML is the same as before.
Your CSS:
.billpay-internet-add-ons > div {
display:none;
}
All your Javascript:
$(document).ready(function(){
$('form#group').click(function(e)
{
$('.billpay-internet-add-ons > div').hide();
$('form#group input[type="radio"]').each(function(index)
{
if($(this).is(':checked'))
{
$('.billpay-internet-add-ons > div:eq(' + index + ')').show();
}
});
});
});
jsFiddle Demo: http://jsfiddle.net/cfSXY/
You can firstly have everything hidden by default (except one form maybe) using CSS, which gets rid of this:
$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();
This has a negative implication for users without javascript, if you're worried - they'll never be able to see the other forms.
Next, only one radio can be checked, so just find out which one it is using:
$('input[name=group1]:checked);
But why would you do that, so you have the radios have a click handler more like:
$('#group input[type="radio"').click(function(){
//code to show/hide form
});
Now you have a choice as to how you link your radio buttons to the different forms one way could be to use the data attribute, so you define your radios like so:
<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>
Which you can access like so:
$('input[name=group1]:checked).data("form");
Now all you need to do is hide the div that was already showing, but that can be achieved with a similar use of the data attribute or by using the :visible selector.
I need to clear all other checkboxes when a user clicks a checkbox. Pretty much the same behavior as a radio button. User clicks checkbox 'A' and checkboxes 'B' and 'C' are both unchecked. I am using jquery but I can't figure out how to accomplish this. Any ideas?
Here are how the checkboxes are set u:
<div class="sales_block_one">
<span class="sales_box_option_set"><input type="checkbox" value="1" id="exopt10i11553501716" name="optset[0][id]" /><label for="exopt10i11553501716">Test + £100.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="2" id="exopt11i21553501716" name="optset[1][id]" /><label for="exopt11i21553501716">Test + £ 200.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="3" id="exopt12i31553501716" name="optset[2][id]" /><label for="exopt12i31553501716">Test 3 + £400.00</label></span>
</div>
if all the checkboxes are siblings, it's just like this,
$(':checkbox').change(function(){
if (this.checked) {
$(this).siblings(':checkbox').attr('checked',false);
}
});
crazy demo
Well, if you really want to copy the behavior of the radio button, simple as this,
$(':checkbox').change(function(){
this.checked = true;
$(this).siblings(':checkbox').attr('checked',false);
});
crazy demo
siblings is when the elements has one same parent/container.
sample
<div>
<input type="checkbox" /><label>A</label>
<input type="checkbox" /><label>B</label>
<input type="checkbox" /><label>C</label>
<input type="checkbox" /><label>D</label>
</div>
in that, <input>s and <label>s are siblings.
In your case, which it's not siblings, you can do it this way,
$('.sales_block_one :checkbox').change(function() {
var $self = this; // save the current object - checkbox that was clicked.
$self.checked = true; // make the clicked checkbox checked no matter what.
$($self).closest('span') // find the closest parent span...
.siblings('span.sales_box_option_set') // get the siblings of the span
.find(':checkbox').attr('checked',false); // then find the checbox inside each span and then uncheck it.
});
crazy demo
more about traversing
$("#checkboxA").click(function() {
var checkedStatus = this.checked;
$("#checkboxB_And_C_Selector").each(function() {
this.checked = !checkedStatus;
});
});