Question

我正在构建一个系统，其中复选框输入实际上是一个图像，因此要选中复选框，用户必须单击标签（图像将成为其中的一部分）。

我用Jquery在Javascript中编写了一个小代码，它最初工作，但如果用户取消选中并想再次检查，那就是一个nops。请试一试，你会更容易理解。

我无法共享系统，所以我只在下面放置了必要的部分（没有图像，只是上面描述的问题 - 注意用户只能点击我系统上的标签而不是复选框本身）。

我的Javascript / Jquery技能仍然非常开始，对于糟糕的代码感到遗憾。谢谢你的帮助！

$(document).ready(function () {
    $('.negociacao').on('click', 'label', function () {

        $(this).closest('div').find('.tatica').prop("checked", true);

        if ($(this).closest('div').find('.tatica').checked = true) {
            $('.negociacao').on('click', 'label', function () {
                $(this).closest('div').find('.tatica').prop("checked", false);
            })
        }
    })
})

.negociacao label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    z-index: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="negociacao">
    <form method="post">
        <fieldset>
            <div>
                <input type="checkbox" class="tatica" value="ana_est">
                <label id="ana_est">Análise Estratégica</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="cat_com">
                <label id="cat_com">Catálogo de Compras</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="com_cen">
                <label id="com_cen">Compras Centralizadas</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="com_spo">
                <label id="com_spo">Compras Spot</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="con_cur">
                <label id="con_cur">Contrato Curto Prazo</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="ges_con">
                <label id="ges_con">Gestão de Contratos</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="ges_ris">
                <label id="ges_ris">Gestão de Risco de Fortalecimento</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="pad_esp">
                <label id="pad_esp">Padronização das Especificações</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="sou_ppu">
                <label id="sou_ppu">S. Sourcing - PPU</label>
                <br>
            </div>
            <div>
                <input type="checkbox" class="tatica" value="sou_tca">
                <label id="sou_tca">S. Sourcing - TCA</label>
                <br>
            </div>
        </fieldset>
    </form>
</div>

Answer 1

当您打算与=进行比较时，您有一个作业==：

if ($(this).closest('div').find('.tatica').checked = true

应该是

if ($(this).closest('div').find('.tatica').checked == true)

或只是

if ($(this).closest('div').find('.tatica').checked)

然而，编写的代码将始终为true，因为您只需将其设置在上一行。

下一个问题是嵌套点击处理程序。你就是不这样做。

整个问题可以简化为以下内容：

$(document).ready(function () {
    $('.negociacao').on('click', 'label', function () {
        // Find the associated checkbox 
        var $check = $(this).closest('div').find('.tatica');
        // Toggle the checked on/off
        $check.prop("checked", !$check.prop("checked"));
    })
})

Jquery to check复选框仅在您第一次单击它时起作用

1 个答案: