添加隐藏输入 onCheck

Question

谁能告诉我在用户选中复选框时向表单添加隐藏输入字段并在用户取消选中复选框时将其删除的最佳方法？

下面是我发到贝宝的表格。我必须在发布之前建立所有领域。我想在表单中包含一个复选框，单击该复选框将为“宠物费”添加另一个隐藏字段。

            <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="text" 替换为 type="hidden" :)

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/