फॉर्म तत्वों को दिखाने/छिपाने के लिए JQuery कोड

मेरे पास चेकबॉक्स की 3 पंक्तियों से भरा एक फॉर्म है। मैं केवल दूसरी दो पंक्तियों को उपलब्ध करना चाहूंगा यदि केवल तभी तीसरे चेकबॉक्स को पहली पंक्ति में चेक किया गया हो। अभी तक, मुझे हर तीन पंक्तियां हर समय दिखा रही हैं, इसलिए यह बहुत संभव है कि मैं jQuery को सही तरीके से नहीं बुला रहा हूं।

साथ ही, यह अच्छा होगा अगर फ़ॉर्म छुपा/शो के दौरान पंक्तियों के नुकसान/लाभ के लिए स्वचालित रूप से खाते में स्केल हो। क्या यह स्वचालित रूप से होता है (यदि मैं एक फर्क पड़ता हूं तो मैं बूटस्ट्रैप का उपयोग कर रहा हूं)।

यहां कोड है:

jQuery

<body>
  <script>
    $(function showHide() {
        $("name=checkboxes").click(function() {
            if (($('.checkboxes-farms').prop('checked', true)) || $('.checkboxes-fields').prop('checked', true) || $('.checkboxes-cropzones').prop('checked', false)) {
                $('#group2').hide();
                $('#group3').hide();
            }
        });
    });
  </script>
</body>

एचटीएमएल

      <form class="form-horizontal">
        
<!-- Form Name --> Select Entities to Search For <!-- Multiple Checkboxes (inline) --> <div class="form-group" id="group1"> <div class="col-md-4"> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group" id="group2"> <div class="col-md-4"> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group" id="group3"> <div class="col-md-4"> </div> </div>
 
      </form>
1
क्या आप jsbin.com डेमो बना सकते हैं?
जोड़ा लेखक SaidbakR, स्रोत
फ़ंक्शन शोहाइड() .. आपने इस फ़ंक्शन को कहीं भी नहीं कहा है
जोड़ा लेखक Bhadra, स्रोत
$ ("नाम = चेकबॉक्स") whatttt ??????????? : डी
जोड़ा लेखक Aamir Afridi, स्रोत
के लिए कुछ बग फिक्स्ड। मुझे उम्मीद है कि आप इसे यहां से jsfiddle.net/aamir/P4KKd ले सकते हैं :) युक्ति। हमेशा अपने कंसोल में त्रुटियों की तलाश करें। fixingthesejquery.com/#slide1 पर एक नज़र डालें;)
जोड़ा लेखक Aamir Afridi, स्रोत

3 उत्तर

प्रयत्न:

$(document).ready(function(){
    $("input[name='checkboxes']").change(function() {
        if (($('#checkboxes-farms').prop('checked') == false) && ($('#checkboxes-fields').prop('checked') == false) && ($('#checkboxes-cropzones').prop('checked') == true)) {
            $('#group2,#group3').show();
        } else {
            $('#group2,#group3').hide();
        }
    });
});

यहां बेवकूफ।

2
जोड़ा
बेवकूफ में बहुत अच्छा काम करता है, लेकिन एचटीएमएल में नहीं है, क्या मैं अपने जवाब को <script> </script> टैग में चिपकाकर गलत तरीके से फ़ंक्शन को कॉल कर रहा हूं? बीटीडब्ल्यू, +1
जोड़ा लेखक Alex Chumbley, स्रोत
धन्यवाद :) तैयार फ़ंक्शन के अंतर्गत लिखें। $ (दस्तावेज़) .ready (function() {$ ("इनपुट [name = 'checkboxes']") की तरह। C & zwnj; hange ........});
जोड़ा लेखक Hiral, स्रोत

आपको शुरुआत में उन्हें छिपाने की ज़रूरत है - यह jQuery दस्तावेज़ तैयार फ़ंक्शन में ऐसा करने का सुझाव देगा उदा।

$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});

और मैं एक 'परिवर्तन' घटना को चेकबॉक्स में संलग्न करता हूं जो अतिरिक्त फ़ील्ड के प्रदर्शन को नियंत्रित करता है।

अगर आपको jsfiddle या इसी तरह के साथ पॉप-अप करने के लिए एक उदाहरण की आवश्यकता है तो मुझे बताएं।

1
जोड़ा
$(function() {
    $('[name="checkboxes"]').on('change', function() {
        var others_checked = $('#checkboxes-fields, #checkboxes-farms').is(':checked');
        $('#group2, #group3').toggle($('#checkboxes-cropzones').is(':checked') && !(others_checked));
    }).trigger('change');
});

फ़ील्ड

1
जोड़ा
क्षमा करें अगर यह स्पष्ट नहीं था, लेकिन दूसरी दो पंक्तियां उपलब्ध नहीं होनी चाहिए यदि तीसरा चेकबॉक्स और अन्य दो में से कोई भी चेक किया गया हो
जोड़ा लेखक Alex Chumbley, स्रोत
अद्भुत संपादन!
जोड़ा लेखक Alex Chumbley, स्रोत
@AlexChumbley - तो मुझे लगता है कि मुझे इसे संपादित करना होगा!
जोड़ा लेखक adeneo, स्रोत