将两个复选框绑定在一起 [英] Binding two checkboxes together

查看:331
本文介绍了将两个复选框绑定在一起的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个复选框

 < input class =checkbox1type =checkboxname ='1'id =example1value =example1/> 

 < input class =checkbox2type =checkboxname ='2'id =example2value =example2/> 

是否可以连接这两个复选框,复选框也发生在另一个?


  • 某些JavaScript函数更改已检查状态


  • 我的实际示例非常复杂,所以我正在寻找一个解决方案,我可以只确定两个复选框之间的连接,从来没有再考虑它。
    谢谢
    carl

    解决方案

    当然可以,但为什么会有两个复选框,相同?也许一个复选框会更方便。 :)



    好吧,无论如何,用一块jQuery这应该可以正常工作。此代码段允许您为组设置复选框,以便自动选择同一组中的其他人。



    当然,您可以很容易地将此​​更改为ids列表,例如,所以行为不需要有两种方法,但我不能完全推断你的问题你需要什么。无论如何,添加额外的复选框只需要他们有正确的属性。



    因为它使用 ,它甚至可以用于动态添加的复选框。



      $(document) ,'input [type =checkbox] [data-group]',function(event){//被点击的复选框var actor = $(this); //复选框的状态var checked = actor.prop ('checked'); //复选框在var group = actor.data('group'); //该组的所有复选框var checkboxes = $('input [type =checkbox] [data- group ='+ group +']'); //所有复选框不包括被点击的复选框var otherCheckboxes = checkboxes.not(actor); //选中复选框otherCheckboxes.prop );  

     < script src =https:// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><input type =checkboxdata-group =group1><输入类型=checkboxdata-group =group2>< input type =checkboxdata-group =group3>< input type =checkboxdata-group =group1>< input类型=checkboxdata-group =group2>< input type =checkboxdata-group =group3>< input type =checkboxdata-group =group1> code> 


    I have two checkboxes

    <input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> 
    

    and

    <input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/>
    

    Is it possible to connect these two checkboxes, so that whatever happens to the 'checked' attribute of one checkbox also happens to the other? It needs to work for

    1. User changes the checked status

    2. Some javascript function changes the checked status

    My actual example is very complex and has many many checkboxes. So I am looking for a solution where I can just determine a connection between two checkboxes and never have to think about it again. thanks carl

    解决方案

    Sure that's possible, but why would you have two checkboxes if they behave the same? Maybe one checkbox would be more convenient. :)

    Well, anyway, with a piece of jQuery this should work fine. This snippet allows you to give a checkbox a group, so it automatically selects others in the same group.

    Of course you could easily change this into a list of ids for example, so the behaviour doesn't need to be two ways, but I couldn't fully deduce from your question what you need. Anyway, adding extra checkboxes just requires them to have the right attribute.

    Because it uses the on function this way, it should even work for checkboxes that are dynamically added.

    $(document).on('click', 'input[type="checkbox"][data-group]', function(event) {
      // The checkbox that was clicked
      var actor = $(this);
      // The status of that checkbox
      var checked = actor.prop('checked');
      // The group that checkbox is in
      var group = actor.data('group');
      // All checkboxes of that group
      var checkboxes = $('input[type="checkbox"][data-group="' + group + '"]');
      // All checkboxes excluding the one that was clicked
      var otherCheckboxes = checkboxes.not(actor);
      // Check those checkboxes
      otherCheckboxes.prop('checked', checked);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="checkbox" data-group="group1">
    <input type="checkbox" data-group="group2">
    <input type="checkbox" data-group="group3">
    <input type="checkbox" data-group="group1">
    <input type="checkbox" data-group="group2">
    <input type="checkbox" data-group="group3">
    <input type="checkbox" data-group="group1">

    这篇关于将两个复选框绑定在一起的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆