Question

我试图根据状态检查/取消选中另一个复选框来检查/取消选中复选框。我试图构建一个Jquery脚本来为这里的每个复选框执行此操作。

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

其余的相同：所以相关性是： CustomFields [12_1] _la1 ---＆gt; lists_1 CustomFields [12_1] _la2 ---＆gt; 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

CHANGE - 这将处理多个复选框以动态列出关系。（这是从您的标记中假设的。所以CustomFields [12_1] _la1 - ＆gt; list_1和CustomFields [12_1] _la2 - ＆gt; 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');

浏览器仅检查属性“已检查”是否存在，它们不会查看其值。可能是因为所有不同的用途：checked，checked =“checked”，checked =“true”等。因此，您需要使用removeAttr()方法完全删除已检查的属性。

<强>更新第二个问题是#部分前面缺少lists_1。

还有第三个问题：你在id中使用特殊字符。根据{{3}}，您需要使用\\来逃避这些特殊的广告。像这样：

$(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');
  });
});

可以找到实时演示jQuery documentation。（我也冒昧地清理了其余的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

尝试绑定到change事件而不是click事件。这样，您将在单击后基于已更改元素的值更新相关复选框。

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

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

4 个答案: