如何根據狀態選中/取消選中另一個複選框來選中/取消選中複選框

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