Question

我在联系表单中通过CSS styling使用2是/否幻灯片切换复选框。

除了我在HTML中声明的内容之外，我无法使表单发送任何其他值。如果我点击幻灯片并将其移至“否”，它将向我发送一封“是”的电子邮件，而不是“否”。

我如何才能发布是或否，取决于幻灯片的位置？

HTML

<div class="contactAddContainer">
    <div class="contactAdd">    
        <input type="checkbox" value="add" id="contactAdd" name="contactAdd" checked/>
        <label for="contactAdd"></label>
    </div>
    <div class="contactAddText">Add me to your email list.
    </div>
</div>
<div class="contactRemoveContainer">
    <div class="contactRemove"> 
        <input type="checkbox" value="remove" id="contactRemove" name="contactRemove" checked/>
        <label for="contactRemove"></label>
    </div>
    <div class="contactRemoveText">Remove me from your email list.
    </div>
</div>

CSS

input[type=checkbox] {visibility:hidden;}
.contactAddContainer, contactRemoveContainer {width:100%; margin:0 auto; text-align:left;}
.contactAdd, .contactRemove {width:80px; height:26px; background:transparent; margin:10px 0; border-radius:0px; position:relative; border:1px solid #2C3E50; vertical-align:middle; display:inline-block;}
.contactAdd::after, .contactRemove::after {content:'NO'; font-size:12px; line-height:26px; font-family:Open Sans; color:#EBEBEB; position:absolute; right:10px; top:0; z-index:0;}
.contactAdd::before, .contactRemove::before {content:'YES'; font-size:12px; line-height:26px; font-family:Open Sans; color:#FFD95F; position:absolute; top:0; left:10px; z-index:0;}
.contactAdd label:hover, .contactRemove label:hover {background:#FFD95F;}
.contactAddText, .contactRemoveText {font-family:Open Sans; font-size:13px; text-align:left; vertical-align:middle; display:inline-block; padding:0 0 0 10px; color:#EBEBEB;}
.contactAdd label {display:block; width:34px; height:20px; border-radius:0px; -webkit-transition:all .4s ease; transition:all .3s ease; cursor:pointer; position:absolute; top:3px; left:3px; z-index:1; background:#2C3E50;}
.contactAdd input[type=checkbox]:checked + label {left:43px;}
.contactRemove label {display:block; width:34px; height:20px; border-radius:0px; -webkit-transition:all .4s ease; transition:all .3s ease; cursor:pointer; position:absolute; top:3px; right:3px; z-index:1; background:#2C3E50;}
.contactRemove input[type=checkbox]:checked + label {right:43px;}

PHP

$subscribe= $_POST['contactAdd'];
$unsubscribe= $_POST['contactRemove'];
$email_message .= "<tr style='font-family:Helvetica, sans-serif; font-size:14px;'><td width='110' style='padding:10px 10px; color:#666; border-right:1px solid #CCC; vertical-align:top;'>SUBSCRIBE </td><td style='padding-left:10px;'>" .$subscribe."</td></tr>";
$email_message .= "<tr style='font-family:Helvetica, sans-serif; font-size:14px;'><td width='110' style='padding:10px 10px; color:#666; border-right:1px solid #CCC; vertical-align:top;'>UNSUBSCRIBE </td><td style='padding-left:10px;'>" .$unsubscribe."</td></tr>";

FORM ACTION（HTML页面中的jQuery）

<script>
// hide response initially
$('#contactResponse').hide();
// start submit
$('#contactForm').submit(function(event) 
    {
    // stop form submit
    event.preventDefault();
    // get values from page
    var $form = $( this ),
        $submit = $form.find( 'button[type="submit"]' ),
        fname_value = $form.find( 'input[name="firstName"]' ).val(),
        lname_value = $form.find( 'input[name="lastName"]' ).val(),
        phone_value = $form.find( 'input[name="phoneNumber"]' ).val(),
        email_value = $form.find( 'input[name="emailAddress"]' ).val(),
        message_value = $form.find( 'textarea[name="message"]' ).val(),
        contactAdd_value = $form.find( 'input[name="contactAdd"]' ).val(),
        contactRemove_value = $form.find( 'input[name="contactRemove"]' ).val(),
        url = $form.attr('action');
    // send data
    var posting = $.post( url, { 
        firstName: fname_value, 
        lastName: lname_value,
        emailAddress: email_value, 
        phoneNumber: phone_value,
        message: message_value,
        contactAdd: contactAdd_value,
        contactRemove: contactRemove_value
    });
    posting.done(function( data )
    {
        // show response
        $('#contactResponse').delay(1000).fadeIn(500).html(data);
        // after submit hide submit button and fade inputs
        $('input[name=submit]').fadeOut(500);
        $('input[name=firstName], input[name=lastName], input[name=phoneNumber], input[name=emailAddress], textarea[name=message], .contactRemoveContainer, .contactAddContainer').fadeOut(500);
        $('input[name=reset]').fadeOut(500);
        $('input[name=reset]').delay(1000).fadeIn(500);
        // show submit and hide response on reset
        $('.reset').click(function(){
            $('input[name=submit]').stop().delay(1000).fadeIn(500);
            //$('input[name=reset]').stop().fadeOut(500);
            //$('input[name=reset]').stop().delay(1000).fadeIn(500);
            $('#contactResponse').fadeOut(500);
            $('input[name=firstName], input[name=lastName], input[name=phoneNumber], input[name=emailAddress], textarea[name=message],  .contactRemoveContainer, .contactAddContainer').stop().delay(1000).fadeIn(500);
        });
    });
});
</script>

Answer 1

你需要添加一些Javascript ..

您已将复选框硬编码为“已选中”，因此每次提交表单时，它们都会发送其值。 CSS使它看起来不同......但就是这样。你不能用CSS“解开”一个复选框。

所以，回答你的问题：使用Javascript。

Answer 2

我修好了。

（1）从HTML中删除了硬编码的checked （2）改变了jQuery中的变量：

contactAdd_value = $form.find( 'input[name="contactAdd"]' ).val(),
contactRemove_value = $form.find( 'input[name="contactRemove"]' ).val(),

为：

contactAdd_value = $('#contactAdd').is(':checked') ? $("#contactAdd").val() : null,
contactRemove_value = $('#contactRemove').is(':checked') ? $("#contactRemove").val() : null,

现在很棒。

联系表格幻灯片切换复选框值

2 个答案: