can we use both class name and input type name in the same click function

Question

I had a functionality of multiple checkbox..in which if we check multiple childs need to be checked and vice versa. BUt it is only happening on the third click. if we click the allcheck all childs are checked and vice versa.. but the functionality i need is if even one child is checked and if we click allcheck remaining need to be checked..and if we uncheck even one child allcheck needs to be unchecked.I used this code

html:

<li class="inputradio"><input name="allCheck" type="checkbox" ></li>

<li id="childcheckbox"><input name="childCheck" type="checkbox"></li>

all check

<div id="actions"><div id="box">
<ul><li class="inputradio"><input name="allCheck" type="checkbox" ></li>
<li class="multiple"><a href="#" class="bt btleft">Multiple</a></li>
 <!--<li class="deletebutton"><a href="#" class="bt btleft">Delete</a></li>
<li class="copy"><a href="#" class="bt btright">Copy</a></li>-->
 <li class="shatebutton"><a href="#" class="bt stmiddle">Share</a>
<div id="smenu">

</div>

child:

 <div id="rightoutputimgae">
<div id="rightimgId" class="rightimg"  rel="tooltip" 
content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
 <div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul><li id="childcheckbox"><input name="childCheck" type="checkbox"></li>
<li id="outedit"><a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
 </a></li>
<li id="outdelete">
<a href="#" onclick="deleteImg()">
 <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
  <li id="outfullscreen">
   <a href="#"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" 
class="fullscreen" title="Full Screen"></a></li>

jquery:

 $('.inputradio').click(function () {
    $('input[name=allCheck]').click(function () {
        $("input[name='childCheck']").prop('checked', this.checked);
    });

    $("input[name='childCheck']").click(function () {
        if ($('input[name=childCheck]:checked').length === $('input[name=childCheck]').length) $('input[name=allCheck]').prop("checked", true);
        else $('input[name=allCheck]').prop("checked", false);
    });
});

can anyone tell me what is wrong in this

Don't assign click handlers from inside another click handler - every time .inputradio is clicked you'll add additional click handlers to the inputs. — nnnnnn
– nnnnnn, Commented May 17, 2013 at 11:41
also all the things in brackets [] should be in quotes after the equals sign. [name=childCheck] should be name="childCheck"] — Henrik Andersson
– Henrik Andersson, Commented May 17, 2013 at 11:42
i'm new to jquery..how can i put class and name at the same time — madhu
– madhu, Commented May 17, 2013 at 11:43

Anjith K P · Accepted Answer · 2013-05-17 11:43:10Z

1

$('input[name=allCheck]').click(function () {
    $("input[name='childCheck']").prop('checked', this.checked);
});

$("input[name='childCheck']").click(function () {
    if ($('input[name=childCheck]:checked').length === $('input[name=childCheck]').length) $('input[name=allCheck]').prop("checked", true);
    else $('input[name=allCheck]').prop("checked", false);
});

Try this

answered May 17, 2013 at 11:43

Anjith K P

2,15827 silver badges35 bronze badges

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

Comments

Arun P Johny · Accepted Answer · 2013-05-17 11:43:22Z

0

It should be

var allchk = $('input[name="allCheck"]').click(function(){
    chks.prop('checked', this.checked);
})

var chks = $("input[name='childCheck']").click(function () {
    allchk.prop("checked", chks.filter(':checked').length === chks.length);
});

answered May 17, 2013 at 11:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

11 Comments

madhu Over a year ago

i've put in doc ready..but its not working..its working only if i put the inputradio class and that too on the third click.the checkbox all and child are in diff div..

Arun P Johny Over a year ago

@madhu there are no checkbox with name childCheck

madhu Over a year ago

oops..check it now pleasee

Arun P Johny Over a year ago

can you recreate the issue in jsfiddle

madhu Over a year ago

actually eerything working fine jsfiddle. but if i integrate in my project..its not working..the control is not going to chidcheckbox

|

hasan.alkhatib · Accepted Answer · 2013-05-17 11:49:17Z

0

Try this

$('.inputradio').click(function () {

  if ($('.inputradio input').is(':checked')) {
    //do something
  }
  if($('#childcheckbox input').is(':checked')) {
    //do smoething else
  }
});

answered May 17, 2013 at 11:49

hasan.alkhatib

1,5593 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

can we use both class name and input type name in the same click function

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related