如何根据状态选中/取消选中另一个复选框来选中/取消选中复选框

Question

伙计们试图根据状态选中/取消选中其他复选框来选中/取消选中复选框。并试图建立一个Jquery脚本来为每个复选框做到这一点。

基本上我想设置检查“lists_1”的状态，每当id =“CustomFields [12_1] _la1”被选中。每当id =“CustomFields [12_1] _la1”时也设置为未选中状态。

与同为休息：所以相关性： CustomFields [12_1] _la1 ---> lists_1 CustomFields [12_1] _la2 ---> lista_2 和和...

注意：我可以更改ID的名称。

<td><span class="required">*</span>&nbsp; 
concesionarias:</td> 
    <td><label for="CustomFields[12_1]_la1"><input type="checkbox"  id="CustomFields[12_1]_la1" name="CustomFields[12][]" value="la1">la1</label><br/><label  for="CustomFields[12_1]_la2"><input type="checkbox" id="CustomFields[12_1]_la2"  name="CustomFields[12][]" value="la2">la2</label><br/><label for="CustomFields[12_1]_la3"> <input type="checkbox" id="CustomFields[12_1]_la3" name="CustomFields[12][]"  value="la3">la3</label><br/><label for="CustomFields[12_1]_la4"><input type="checkbox"  id="CustomFields[12_1]_la4" name="CustomFields[12][]" value="la4">la4</label><br/></td> 
</tr><tr> 
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Contact Lists:</td> 
    <td><label for="lists_1"><input type="checkbox" id="lists_1" name="lists[]"  value="1" />&nbsp;ddsd</label></td> 
</tr><tr> 
    <td>&nbsp;</td> 
    <td><label for="lists_2"><input type="checkbox" id="lists_2" name="lists[]"  value="2" />&nbsp;laconce1</label></td> 
</tr><tr> 
    <td>&nbsp;</td> 
    <td><label for="lists_3"><input type="checkbox" id="lists_3" name="lists[]"  value="3" />&nbsp;laconce2</label></td> 
</tr><tr> 
    <td>&nbsp;</td> 
    <td><label for="lists_4"><input type="checkbox" id="lists_4" name="lists[]"  value="4" />&nbsp;laconce3</label></td> 
</tr><tr> 
    <td>&nbsp;&nbsp;&nbsp;&nbsp;ESTADO:</td> 
    <td><select name="CustomFields[13]" id="CustomFields_13_1"><option value="">--  Please choose an option --</option><option value="Contacto">Contacto</option><option  value="Oportunidad">Oportunidad</option><option value="Vendido">Vendido</option></select> </td> 
</tr><input type="hidden" name="format" value="h" /> 
     <tr> 
      <td></td> 
      <td> 
       <input type="submit" value="Subscribe" /> 
       <br/> 
      </td> 

这是脚本我试过了，它不工作。

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#CustomFields[12_1]_la1").click(function() { 
       if ($("CustomFields[12_1]_la1").attr("checked") == true) { 
       $("lists_1").attr('checked', true); 
       } else if ($("CustomFields[12_1]_la1").attr("checked") == false) { 
       $("lists_1").attr('checked', false); 
       } 
     }); 
    }); 
</script> 

可以sombody建议一个新的工作之一，即时通讯试图完成什么？感谢所有

Answer 1

老--- -------

演示：

$(document).ready(function(){ 

    //bind event to checkbox 
    $("input[type='checkbox']").bind('click', function(){ 

    var $t = $(this); 

    // check if element is checked 
    if($t.val() == 'la1' && $t.is(':checked')) { 
     $("#lists_1").attr('checked', true); 
    } 
    else { 
     $("#lists_1").attr('checked', false); 
    } 
    }); 
}); 

新-------

演示可以发现here

变化 - 这将处理多个复选框来动态列出的关系。 （这是从您的标记假定所以CustomFields [12_1] _la1 - > LIST_1和CustomFields [12_1] _la2 - > list_2将映射到每个像这样。）

$(document).ready(function(){ 

    //bind event to checkbox 
    $("input[type='checkbox']").bind('click', function(){ 
    var $t = $(this), 
     val = $t.val(), 
     key = val.charAt(val.length-1); 

    // check if element is checked 
    if($t.val() == 'la'+key && $t.is(':checked')) { 
     $("#lists_"+key).attr('checked', true); 
    } 
    else if($t.val() == 'la'+key){ 
     $("#lists_"+key).attr('checked', false); 
    } 
    }); 
}); 

Answer 2

禁止使用

$("lists_1").attr('checked', false); 

不工作，但你需要使用

$("lists_1").removeAttr('checked'); 

浏览器只检查属性“检查”存在，他们不看属性到它的价值。可能因为所有不同的用途：检查，检查=“检查”，检查=“真”等。因此，您需要使用removeAttr()方法删除已检查的属性完全。

更新 的第二个问题是在lists_1部件的前面丢失的#。

还有第三个问题：您在您的ID中使用特殊字符。根据jQuery documentation，你需要用\\来逃避这些特殊的cacharters。像这样：

$(document).ready(function(){ 
    $('#CustomFields\\[12_1\\]_la1').click(function() { 
    var myChecked = $(this).attr("checked"); 
    if (myChecked == true) 
     $("#lists_1").attr('checked', true); 
    else 
     $("#lists_1").removeAttr('checked'); 
    }); 
}); 

现场演示可以找到here。 （我也自由地清理了其他JavaScript代码。）

Answer 3

你没有正确引用复选框，需要使用类或ID

<script type="text/javascript"> 
    $(document).ready(function(){ 
      $("#CustomFields[12_1]_la1").click(function() { 

        $("#lists_1").attr('checked', $(this).attr("checked")); 
        $("#lists_2").attr('checked', $(this).attr("checked")); 
        $("#lists_3").attr('checked', $(this).attr("checked")); 
        $("#lists_4").attr('checked', $(this).attr("checked")); 

      }); 
     }); 
    </script> 

但如果你可以给他们一个共同的类你可以：

<script type="text/javascript"> 
    $(document).ready(function(){ 
      $("#CustomFields[12_1]_la1").click(function() { 

        $(".lists_all").attr('checked', $(this).attr("checked")); 

      }); 
     }); 
    </script> 

Answer 4

尝试，而不是绑定到更改事件来点击事件。这样您就可以根据点击后更改的元素的值更新相关的复选框。

function change_handler(e) { 
    var $t = $(e.target), 
     t_is_checked = $t.is(':checked'), 
     list_number = $t.attr('id').split('_').reverse()[0].splice(2), 
     related_item_id = "#list_" + list_number, 
     related_item = $(related_item_id); 
    related_item.attr('checked', t_is_checked ? '' : 'checked'); 
} 

// bind to all your target input fields (maybe give them a class for easy selection) 
// (just binding one for this example) 

$("#CustomFields[12_1]_la1") 
    //.unbind('change') // really handy if you are testing the code via console 
    .bind('change', change_handler) 
    .change(); // trigger a bogus change event to setup the initial checkbox state