我们可以在同一个点击功能中同时使用类名和输入类型名称

时间:2013-05-17 11:36:03

标签: jquery html

我有多个复选框的功能..如果我们检查多个孩子需要检查,反之亦然。 BUt它只发生在第三次点击。 如果我们点击allcheck所有的孩子都被检查,反之亦然..但我需要的功能是,如果甚至一个孩子被检查,如果我们点击allcheck剩下需要检查..如果我们取消选中一个孩子allcheck需要取消选中我使用了这段代码

HTML:

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

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

全部检查

<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>

子:

 <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);
    });
}); 

任何人都可以告诉我这个

有什么问题

3 个答案:

答案 0 :(得分: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);
});

试试这个

答案 1 :(得分:0)

应该是

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);
});

答案 2 :(得分:0)

试试这个

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

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