Question

我有几个复选框，点击每个我希望它们的值进入隐藏字段，jQuery用逗号分隔，如果它们都未被选中，则隐藏字段值将返回-1。以下是我的尝试。

<input type="hidden" name="agreement_ids" value="-1">

<input type="checkbox" id="agreementChecker-1" name="agreeCheck-1" value="35" class="mandatory agreeChecker">
<input type="checkbox" id="agreementChecker-2" name="agreeCheck-2" value="45" class="mandatory agreeChecker">
<input type="checkbox" id="agreementChecker-3" name="agreeCheck-3" value="52" class="mandatory agreeChecker">

$('.agreeChecker').click(function(){

        if($(this).prop('checked')){

            var resultObj = $(this).val();
            var outputObj = $('input[name="agreement_ids"]');
            var stringToAppend = resultObj.val().length > 0 ? resultObj.val() + "," : "";
        resultObj .val( stringToAppend + outputObj.val() );

        }else{
            if($('.agreement-text').length > 0){
                $('input[name="agreement_ids"]').val('-1');//uncheck
            }else{
                $('input[name="agreement_ids"]').val('');
            }
        }
    });

Answer 1

你有一个错误的方法来构建逗号分隔值。使用您的代码，很难确定已检查的元素值是否已经附加在隐藏字段中。

我建议你修改点击处理程序，

1）首先获取所有选中的元素

2）使用.map()函数

加入其值以创建CSV

3）如果步骤1中checked元素的长度为0，则设置-1 else从上面的步骤2设置连接值

$('.agreeChecker').click(function(){
  var $checkedagreeChecker = $('.agreeChecker:checked');
  var joinedValues = $checkedagreeChecker.map(function(){return this.value}).get().join(",");
  $('input[name="agreement_ids"]').val($checkedagreeChecker.length > 0 ? joinedValues : -1 )
});

Answer 2

我已更新您的代码，请您验证

  $(document).ready(function () {
        $(".agreeChecker").click(function () {
            var checked_checkboxes = $('#aggrement input[name="agreeCheck"]:checked');
            var message = "";
            var chkCount = 1;
            checked_checkboxes.each(function () {
                var value = $(this).val();
                var inputObj = $(this)[0];
                if (inputObj.checked) {
                    if (chkCount == 1)
                        message += value;
                    else
                        message += "," + value;
                    chkCount++;
                }
            });
             if (message == "")
                $("#agrrementID").val("-1");
            else
                $("#agrrementID").val(message);
            console.log($("#agrrementID").val());
        });
    });

 <div id="aggrement">
        <label>
            <input type="checkbox" id="agreementChecker-1" name="agreeCheck" value="35" class="mandatory agreeChecker">35</label>
        <label>
            <input type="checkbox" id="agreementChecker-2" name="agreeCheck" value="45" class="mandatory agreeChecker">45</label>
        <label>
            <input type="checkbox" id="agreementChecker-3" name="agreeCheck" value="52" class="mandatory agreeChecker">52</label>

    </div>
    <input type="hidden" name="agreement_ids" id="agrrementID" value="-1">

Answer 3

您的J查询代码逻辑有问题，请查看以下代码

 $('.agreeChecker').click(function () {
        if ($(this).prop('checked')) {
            var resultObj = $(this).val();
            var outputObj = $('input[name="agreement_ids"]');
            var stringToAppend = resultObj.length > 0 ? resultObj + "," : "";
            if (outputObj.val() === '-1') {
                $('input[name="agreement_ids"]').val('');
            }
            outputObj.val(stringToAppend + outputObj.val());
        } else {
            if ($('.agreement-text').length > 0) {                   
                $('input[name="agreement_ids"]').val('-1');//uncheck
            } else
            {
                $('input[name="agreement_ids"]').prop("value", "-1");                  
            }
        }
    });

我尝试在代码中运行一些条件，希望它可以帮助你

由于

单击时隐藏字段中的多个复选框值

3 个答案: