Jquery Checkbox

Question

I have four check boxes and when I click more than two of them then under the last clicked checkbox one I should get a <div><a href="#">Compare</a> </div> contains a compare link. It may be randomly. I tried to do this using JQuery and below is my code.I need improve one. The issue is I need when two of check box will check under the last one I should get visible the hidden div.

$(document).ready(function() {
  $('input[type=checkbox]').change(function(){ 
    if($('input[name=checkbox1]').size() == 1){    
      $('#checkbox1_compare').show();
    } 
    else { 
      $('#checkbox1_compare').hide();    
    }
  }) 
});

If you can show us the checkbox and the compare link in the same HTML snippet then we could better assist you in how your JavaScript should be changed. — 700 Software
– 700 Software, Commented Oct 22, 2010 at 12:27

Nick Craver · Accepted Answer · 2010-10-22 12:26:35Z

1

You can check the .length and use .toggle() to show/hide based on how many are checked, like this should work:

$(function() {
  $('input[type=checkbox]').change(function(){
    $('#checkbox1_compare').toggle($('input[name=checkbox1]').length > 1);
  });
})

If you need to move the div/link elements to be after the last checked one, something like this would work:

$(function() {
  $('input[type=checkbox]').change(function(){
    var checked = $('input[name=checkbox1]:checked');
    $('#checkbox1_compare').toggle(checked.length > 1)
                           .insertAfter(checked.last());
  });
})

answered Oct 22, 2010 at 12:26

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user484156 Over a year ago

No there are four checkboxes and four Divs under that. We cannot move the one single divs. So Either or shoud display.

Nick Craver Over a year ago

@user - I'm not understanding from your comment, can you post the full markup?

user484156 Over a year ago

1st there are four check box its a mobile compare page where user need to check at list two check box to highlight the Compare link.

user484156 Over a year ago

But the compare link should visible under the last checked check-box, your approach is also good where we can append the dive under every last checked check box dynamically. But above code is not working. But what if for rest check boxex?

andres descalzo · Accepted Answer · 2010-10-22 15:21:00Z

0

try this: (taken based on the source of @Nick Craver)

html:

<div id="link-compare"><a href="#">Compare</a></div>

js:

$(document).ready(function() {

  var refInputCheckbox = $('input[type="checkbox"]');

  $(refInputCheckbox).change(function(){ 

    $('#link-compare')
       .toggle(
          $(refInputCheckbox).filter(':checked').length > 1
       );

  });


});

answered Oct 22, 2010 at 15:21

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

Collectives™ on Stack Overflow

Jquery Checkbox

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related