联系表单滑动切换复选框值 - contact form slide toggle checkbox values

我在一个联系人表单中通过CSS样式使用了2个是/否滑动切换复选框。

我无法让表单发送任何值，除了我在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 (jQuery在HTML页面中)

<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>

你需要添加一些Javascript..

您已经将复选框硬编码为'checked'，因此它们将在每次提交表单时发送其值。CSS使它看起来不同.. ..但这就是它的全部功能。你不能用CSS ' uneck '一个复选框

那么，在回答你的问题:使用Javascript

我修好了。

(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,