Question

有人可以告诉我在用户选中复选框时向表单添加隐藏输入字段的最佳方法，如果用户取消选中该复选框，则将其删除吗？

以下是我发给paypal的表格。我必须在帖子之前构建所有字段。我希望在表单中包含一个复选框，单击此处将为＆＃34; Pet Fee＆＃34;添加另一个隐藏字段。

            <form id='paypalCheckout' action='https://www.paypal.com/cgi-bin/webscr' method='post' style="margin-bottom: 10px">
            <input type="hidden" name="item_name_1" value="Demo Vacation Home" />
            <input type="hidden" name="item_number_1" value="Demo-Vacation-Home" />
            <input type="hidden" name="amount_1" value="4" />
            <input type="hidden" name="quantity_1" value="1" />

            <input type="hidden" name="item_name_2" value="Refundable Damage Deposit" />
            <input type="hidden" name="item_number_2" value="Refundable-Damage-Deposit" />
            <input type="hidden" name="amount_2" value="3" />
            <input type="hidden" name="quantity_2" value="1" />

            <input type="hidden" name="item_name_3" value="Cleaning Fee" />
            <input type="hidden" name="item_number_3" value="Cleaning-Fee" />
            <input type="hidden" name="amount_3" value="2" />
            <input type="hidden" name="quantity_3" value="1" />

            <input type="hidden" name="item_name_4" value="12% Reservation Fee" />
            <input type="hidden" name="item_number_4" value="12%-Reservation-Fee" />
            <input type="hidden" name="amount_4" value="0.48" />
            <input type="hidden" name="quantity_4" value="1" />

            <input type="hidden" name="item_name_5" value="8% Tax Rate" />
            <input type="hidden" name="item_number_5" value="8%-Tax-Rate" />
            <input type="hidden" name="amount_5" value="0.32" />
            <input type="hidden" name="quantity_5" value="1" />



            <input type='hidden' name='business' value='juliocpreciado@gmail.com' />
            <input type='hidden' name='shopping_url' value='http://www.dreamhomevacationrentals.com/cart/' />
            <input type='hidden' name='lc' value='en_US' />
            <input type='hidden' name='cmd' value='_cart' />
            <input type='hidden' name='charset' value='utf-8'>
            <input type='hidden' name='upload' value='1' />
            <input type='hidden' name='no_shipping' value='2' />
            <input type='hidden' name='currency_code' value='USD' id='currency_code' />
            <input type='hidden' name='custom' value='|||' />
            <input type='hidden' name='notify_url' value='http://www.dreamhomevacationrentals.com/store/ipn/'>
            <input type='hidden' name='return' value='http://www.dreamhomevacationrentals.com/thank-you/' />
            <input id='PayPalCheckoutButton' type='image' src='https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif' value='Checkout With PayPal' />
            </form>

Answer 1

要隐藏它，只需替换type =＆＃34; text＆＃34;类型=＆＃34;隐藏＆＃34; ：）

JQuery的：

    <form id="myForm">
        <input onclick="addRemoveHiddenInput('testId', 'testName', 'testValue')" type="checkbox" id="mc" name="paymentMethod" value="Mastercard"><label for="mc"> Mastercard</label>
    </form>

    <script>

        function addRemoveHiddenInput(id, name, value) {

            if ( $('#' + id).length > 0 ) {

                $('#' + id).remove();  
            } else {

                $('#myForm').append('<input type="text" name="' + name + '" value="' + value + '" id="' + id + '" />');   
            }

        }

    </script>

小提琴：http://jsfiddle.net/9w5g3swr/

普通Javascript：

<form id="myForm">
    <input onclick="addRemoveHiddenInput('testId', 'testName', 'testValue')" type="checkbox" id="mc" name="paymentMethod" value="Mastercard"><label for="mc">Mastercard</label>
</form>

<script>

    function addRemoveHiddenInput(id, name, value) {

        var hiddenInput = document.getElementById(id);

        if ( hiddenInput != null ) {

            hiddenInput.parentNode.removeChild(hiddenInput);
        } else {

            document.getElementById('myForm').innerHTML = document.getElementById('myForm').innerHTML + '<input type="text" name="' + name + '" value="' + value + '" id="' + id + '" />';
        }

    }

</script>

小提琴：http://jsfiddle.net/uu1ftnhg/

Answer 2

您可以添加到您的复选框：onChange="if(htis.checked)$("#yourinput").style.display = 'none';else $("#yourinput").style.display = 'block';"

编辑：或某些事情，但你明白了。

Answer 3

HTML：

<label><input type = "checkbox" id ="myCheckBox"/> Check me!</label>
<span id="hiddenWrapper">
</span>

这是所需的jQuery代码：

 $('#myCheckBox').click(function(){
        var isChecked = $(this).prop('checked');
        if(true === isChecked){
            $('#hiddenWrapper').html('<input type="hidden" value="myVal" />');

        }
        else
        {
            $('#hiddenWrapper').empty();
        }
    });

看看这个http://jsfiddle.net/o7nay5xz/

Answer 4

$("#randomCheckbox").change(function(){
     if($(this).is(":checked"))
         $("#paypalCheckout").append($("<input type='hidden' id='randomId'>"));
     else
         $("#paypalCheckout #randomId").remove();
})

Answer 5

触发您的复选框以添加或删除隐藏的元素。这是一个jQuery示例：

$(function () {
    $("#chkbox").on("click", function () {
      var $this = $(this),
          $input = $('<input type="hidden" name="hiddenField" />'); 

        // Insert the hidden field after the checkbox if checked
        if ($this.prop("checked")) {
            $this.after($input);

        // Remove the hidden field if unchecked
        } else {
            $this.next().remove();
        }
    });
});

JSFiddle：http://jsfiddle.net/qy1ez1L8/1/

添加隐藏输入onCheck

5 个答案: