複選框：選中檢測與jQuery

我有一個複選框，如果選中將發送禮物作爲月度禮物。如果複選框未選中，則禮物是單一禮物。複選框：選中檢測與jQuery

我有什麼：

<div id="monthly-right"> 
    <input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div> 
<div id="donation-length"></div>

我需要顯示如果檢查：

<div id="monthly-right"><input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div> 
<div id="donation-length"> 
    <input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" /> 
    <input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" /> 
</div>

而且回來，如果未選中

來源

2012-05-02 TikaL13

所以你真的想看到的輸入，或者只是添加了隱藏的輸入用戶將看不到？ –

你真的希望單選按鈕變成複選框嗎？ –

只需添加用戶不會看到的隱藏輸入 – TikaL13

我會做

$('#check').click(function() { 
    var type = $(this).is(':checked') ? "checkbox" : "radio"; 
    var input_r_or_c = $('<input />', { 
     type: type, 
     name: "level_autorepeat", 
     id: "level_autorepeat", 
     value: "false" 
    }); 
    if ($(this).is(':checked')) { 
     var input1 = $('<input />', { 
      type: "hidden", 
      name: "sustaining.frequency", 
      id: "sustaining_frequency", 
      value: "monthly" 
     }); 
     var input2 = $('<input />', { 
      type: "hidden", 
      name: "sustaining.duration", 
      id: "sustaining_duration", 
      value: "0" 
     }); 
     $('#donation-length').append(input1).append(input2); 
    } else { 
     $('#donation-length').empty(); 
    } 
    $('#monthly-right input').replaceWith(input_r_or_c); 
});

http://jsfiddle.net/vKLWA/1/

來源

2012-05-02 16:52:01

他的問題必須有一個錯字，對吧？使用兩個複選框/單選按鈕來完成這項工作的用法模型是什麼？爲什麼會有這種變化？你的答案完全符合他的html建議，但它看起來......奇怪。 –

@JeffB是的，這是奇怪的，但這就是他問的。如果他打算另一件事我會改變我的代碼:) –

我明白。我不是在批評你的答案，只是想向一個同伴回答呃。 –

這是你如何檢查，如果您的複選框「檢查'使用jquery：

$('#your_checkbox_id').is(':checked');

來源

2012-05-02 16:43:27

如何檢查它是否未選中？我想說如果檢查顯示這些如果unchcked不要添加這些隱藏的輸入形式 – TikaL13

試試這個

$('#checkBox').attr('checked');

（或）

$('#checkBox').prop('checked');

來源

2012-05-02 16:44:43 coder

可以使用

$('#donation-length').hide(); 
if ($('#level_autorepeat').is(':checked')){ 
    $('#donation-length').show(); 
}

來源

2012-05-02 16:45:30 Ollie

如果這些被隱藏的投入，我會做這樣的服務器端。否則，如果javascript被禁用，用戶將不知道該複選框沒有做任何事情，並可能無意中做出單一或重複出現的貢獻。

隱藏和顯示隱藏的輸入不會影響在提交時是否將它們發送到服務器。您需要實際從DOM中刪除它們，或者將它們移到當前表單之外。

因此，基本上，總是發送隱藏的輸入，但在服務器端，忽略頻率/持續時間，除非設置了複選框值。

如果你仍然想用JavaScript來做到這一點，無論如何，你需要做的是：

var freq = '<input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" /><input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />'; 

$('#monthly-right').on('change', '#level_autorepeat', function() { 
    if($(this).is(':checked')) { 
     $('#level_autorepeat').html(freq); 
    } else { 
     $('#level_autorepeat').html(""); 
    } 
}

其他的答案告訴你如何檢查是否一個複選框被選中，但你真的需要留意當它使用onchange處理程序進行更改時，該處理程序通過.on()完成。我將處理程序附加到父級，並在複選框更改時觀察。如果複選框被選中，我將頻率/持續時間代碼（存儲在變量中）添加到div中，否則我會清除div中的HTML。您可以通過多種方式來完成此操作，包括將內容保留在表單外的另一個div中，並將內容移動/複製到div中。

來源

2012-05-02 16:46:56

謝謝你的解釋。我完全理解在服務器端進行的操作，不幸的是，這必須在客戶端完成，因此用戶必須啓用JavaScript。我會試試這個，看看它是否適合我。再次感謝！ – TikaL13

複選框：選中檢測與jQuery

回答

相關問題