Tampilkan dan sembunyikan kotak centang javascript

Pendekatan lain

html

  
  

    Taken Course Online ?: 
    

      
      Yes
      
      No
    
  

  
  

    Name of Course: 
    

      
    
  

css

.hide {
  display: none;
}

javascript

const takenOnlineInputs = document.querySelectorAll('[name="take-online"]')
const courseOnline = document.querySelector('#course-online')

takenOnlineInputs.forEach((elem) => {
  elem.addEventListener('click', (event) => {
    const hidden = event.target.id === 'take-online-no'
    
    courseOnline.classList.toggle('hide', hidden)
  })
})

Sunting. lihat classList toggle force argumen

Saya tahu ini sederhana tetapi saya menolaknya untuk pertama kali karena kami baru saja membeli 50 lisensi COTG karena kami diberi jaminan bahwa COTG dapat mencapainya. Adakah yang bisa membantu?

Ini adalah kode sumber template yang cukup mendasar dan yang perlu Anda gunakan dengan cotg-2. 0. 0. js api. Pada dasarnya gunakan saja template COTG pemula dan salin kode html sumber dan skrip javascript di bawah ini

<div class="row">
<div class="columns">
    <table id="users_table" class="table-no-style" role="cotg-table" cellpadding="0" cellspacing="0" style="width: 100%;">
        <thead>
            <tr>
                <td style="width: auto%;"></td>
                <td style="width: 10%;">
                    <br>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="small-12 columns">
                        <label>Name 
                            <input name="customer_name" placeholder=" enter your name" type="text">
                        </label>
                    </div>
                    <legend>
                        <input id="user_email" value="" name="check_user_email" type="checkbox">
                        <label for="user_email">Do you have an email?</label>
                    </legend>
                    <div id="check_user_email" class="check_user_email" style="display:none;">
                        <div class="row">
                            <div class="small-12 columns">
                                <label>email address 
                                    <input "="" name="user_email" placeholder="email address" type="email">
                                </label>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    <button class="round tiny secondary del-row" role="cotg-delete-row-button" type="button">Del</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="text-right" colspan="6">
                    <button class="round tiny add-row" role="cotg-add-row-button" type="button">Add</button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

DAN SKRIPT

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

Itu hanya Phil yang Luar Biasa

Tidak dalam sejuta tahun saya akan bisa menemukan itu. senyum

Seindah apa pun kode Anda berfungsi, apakah ada kemungkinan saya dapat menemukan penjelasan untuk kode tersebut di mana saja sehingga saya dapat menyesuaikannya dengan kebutuhan saya sendiri?

Selain itu, menurut saya ini harus ditangani oleh COTG API. Saat ini, API tampaknya tidak menangani atau mendeteksi elemen dan peristiwa bersarang apa pun di dalam baris yang ditambahkan secara dinamis

Kode ini berfungsi dengan baik di sini TETAPI selain itu saya ingin pengguna menggunakan kotak centang "eksklusif" (checkbosex yang berperilaku seperti tombol radio - ini atau yang lain) untuk metode komunikasi pilihan mereka (email, sms, atau telepon), tetapi sekali

<div class="row">
<div class="columns">
    <table id="users_table" class="table-no-style" role="cotg-table" cellpadding="0" cellspacing="0" style="width: 100%;">
        <thead>
            <tr>
                <td style="width: auto%;"></td>
                <td style="width: 10%;">
                    <br>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="small-12 columns">
                        <label>Name 
                            <input name="customer_name" placeholder=" enter your name" type="text">
                        </label>
                    </div>
                    <legend>
                        <input id="user_email" value="" name="check_user_email" type="checkbox">
                        <label for="user_email">Do you have an email?</label>
                    </legend>
                    <div id="check_user_email" class="check_user_email" style="display:none;">
                        <div class="row">
                            <div class="small-12 columns">
                                <label>email address 
                                    <input name="user_email" placeholder="email address" type="email">
                                </label>
                            </div>
                        </div>
                        <div>
                            <ul>
                                <div class="checkbox-wrapper">
                                    <input id="emailpref" class="communication-preference" value="email" name="communication-preference" checked="true" type="checkbox">
                                    <label for="emailpref">Email</label>
                                    <input id="smspref" class="communication-preference" value="sms" name="communication-preference" type="checkbox">
                                    <label for="smspref">SMS</label>
                                </div>
                            </ul>
                        </div>
                    </div>
                </td>
                <td class="text-right">
                    <button class="round tiny secondary del-row" role="cotg-delete-row-button" type="button">Del</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="text-right" colspan="6">
                    <button class="round tiny add-row" role="cotg-add-row-button" type="button">Add</button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Dan javascript yang termasuk milik Anda

       CheckBoxToRadio(".checkbox-wrapper .communication-preference");
	function CheckBoxToRadio(selectorOfCheckBox, isUncheckable) {
	$(selectorOfCheckBox).each(function(){
    	$(this).change(function(){
        	var isCheckedThis = $(this).prop('checked');
        	$(selectorOfCheckBox).prop('checked',false);
        
        	if (isCheckedThis === true || isUncheckable === true) {
            $(this).prop('checked', true);
        	}
    	});
	});
}
   

$('.row').on('change',':checkbox', function() {

if(this.checked){

	$(this).parent().next().show();

} else {

	$(this).parent().next().hide();

}

});

fungsi onElementInserted(containerSelector, elementSelector, callback) {

var onMutationsObserved = function(mutations) {

    mutations.forEach(function(mutation) {

        if (mutation.addedNodes.length) {

            var elements = $(mutation.addedNodes).find(elementSelector);

            for (var i = 0, len = elements.length; i < len; i++) {

                callback(elements[i]);

            }

        }

    });

};

var target = $(containerSelector)[0];

var config = { childList: true, subtree: true };

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(onMutationsObserved);    

observer.observe(target, config);

}

onElementInserted('div', '. check_user_email’, fungsi(elemen) {

element.style.display = "none";

});

Bagaimana cara memasukkan kode saya ke dalam kode Anda sehingga kotak centang pada baris yang ditambahkan secara danyma berperilaku seperti yang ada di baris asli pertama

Bisakah Anda menambahkan dukungan untuk perilaku ini di COTG API?
Bantuan Anda sangat kami hargai

Nah itu pertanyaan multi-bagian jika saya pernah melihatnya. Biarkan saya menjawab secara bertahap

Penjelasan kode sebelumnya
Baris $('.row').on('change',':checkbox', function()_ membuat monitor peristiwa untuk kotak centang apa pun yang bersarang di bawah elemen apa pun yang memiliki kelas

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

Metode

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

$( document ).ready(function() {
		$('input[type="checkbox"]').click(function() { 
    		var inputName = $(this).attr("name"); 
    		$("." + inputName).toggle();
    	
    });

Semoga itu menjawab bagian dari balasan Anda itu. Saya akan membahas poin-poin lain di posting terpisah

Untuk menggunakan tombol Radio, saya tidak yakin mengapa Anda mengonversi Kotak Centang ke Radio, tetapi harus lebih sederhana dengan tombol Radio asli. Saya akan merekomendasikan Anda mengubah HTML Anda menjadi sesuatu seperti

<tbody>
  <tr>
    <td>
      <div class="small-12 columns">
        <label>Name 
          <input name="customer_name" placeholder=" enter your name" type="text">
        </label>
      </div>
      <legend>
        <input id="user_contact" value="" name="check_user_contact" type="checkbox">
        <label for="user_contact">Yes, you may contact me</label>
      </legend>
      <div id="check_user_email" class="check_user_email" style="display: none; margin: 24px">
        <div>Preferred communication method</div>
        <input id="emailpref" class="communication-preference" value="email" name="communication-preference" checked="true" type="radio">
        <label for="emailpref">Email</label>
        <input id="smspref" class="communication-preference" value="sms" name="communication-preference" type="radio">
        <label for="smspref">SMS</label>
        <label id="field_label" class="field_label" for="user_field">Email address</label>
        <input name="user_field" placeholder="[email protected]" type="email">
      </div>
    </td>
    <td class="text-right">
      <button class="round tiny secondary del-row" role="cotg-delete-row-button" type="button">Del</button>
    </td>
  </tr>
</tbody>

Omong-omong, ini hanya bagian TBODY
Sekarang dalam skrip Anda menambahkan penangan ke acara perubahan tombol Radio

$('.row').on('change','[type=radio]', function() {
	var elem = $(this).siblings().closest('.field_label');
	if(this.value=="email"){
		elem.text("Email address");
		elem.next().attr("type", "email");
		elem.next().attr("placeholder","[email protected]");
	} else {
		elem.text("Phone number");
		elem.next().attr("type", "phone");
		elem.next().attr("placeholder","1(555) 555-5555");
	}
});

Dan Anda kemudian mengubah metode onElementInserted() untuk menyetel ulang elemen turunan dengan benar di setiap baris baru ke nilai default yang sesuai

onElementInserted('div', '.check_user_email', function(element) {
	var elem = $(element);
    elem.hide();
    var fld = elem.children().closest('.field_label');
    fld.text("Email address");
	fld.next().attr("type", "email");
	fld.next().attr("placeholder","[email protected]");
});

Saya pikir ini membuat formulir yang lebih ramah pengguna secara keseluruhan
Ini semua bisa dioptimalkan, tetapi saya akan menyerahkan latihan itu kepada pembaca.

Misalnya delegasi diterapkan dengan acara klik $(“table[role='cotg. FieldsTable’]”). on(''change", nested_selector, function(){…do something…}) harus secara otomatis bekerja pada elemen bersarang yang cocok dengan nested_selector, apakah ditambahkan secara dinamis atau tidak

Nah itulah inti masalahnya di sana. acara onChange seperti yang Anda jelaskan di sini akan diterapkan secara sepihak ke semua elemen yang cocok dengan pemilih. Tapi Anda tentu tidak ingin menerapkan tindakan yang sama ke kotak centang, tombol radio, dan bidang edit. Hal yang sama berlaku untuk acara mouse atau keyboard. Jadi, Anda mungkin harus memiliki banyak pemilih dan pemantau peristiwa karena jumlah jenis kontrol berbeda yang ditemukan di setiap baris… yang pada akhirnya mungkin memerlukan penyesuaian sebanyak - jika tidak lebih - daripada jika Anda harus memilih dan memilih secara selektif mana

Namun, komentar Anda menyoroti fakta bahwa menggandakan baris tabel dapat ditingkatkan untuk memudahkan desainer Formulir mencapai tujuan mereka dengan sesedikit mungkin mengutak-atik. Saya akan mendiskusikan hal ini dengan kolega saya dan kita akan melihat apa yang dapat kami hasilkan di versi perangkat lunak yang akan datang

Diskusi yang bagus secara keseluruhan… Terima kasih

Halo Phil

Terima kasih atas bantuan Anda yang berharga. Kami menemukan beberapa masalah lain saat mendesain formulir kami dengan COTG

Sebagian besar kode kami tidak berpengaruh pada elemen bersarang di dalam baris yang ditambahkan secara dinamis

Sekadar memberi Anda gambaran, kami telah menggunakan API SurveyJS untuk merancang formulir yang mirip dengan contoh ini

https. // www. surveyjs. io/Examples/LibrarySinglePage?id=history-pasien-nyata&platform=jQuery&theme=modern

Dan

https. // www. surveyjs. io/Examples/LibrarySinglePage?id=real-covid-19&platform=jQuery&theme=modern

Formulir lacak dan lacak COVID-19 kami menyertakan kombinasi komponen dalam dua contoh ini

Kami dapat membuat formulir hampir tanpa skrip dengan API ini

Di halaman kedua dari contoh formulir pertama di atas, seseorang dapat menambahkan baris dinamis yang berisi elemen formulir bersarang lainnya yang merespons peristiwa DOM standar. Selain itu, saya dapat mengonversi tombol radio menjadi kotak centang seperti yang telah dibahas sebelumnya

Kami mengontrak reseller OL dan pelanggan di Timur Tengah dan Asia dan menghadapi kompetisi dan tenggat waktu untuk memproduksi formulir ini secepat mungkin dan dengan biaya seminimal mungkin. Pembuatan formulir membentuk sekitar 60% dari bisnis kami dan pelanggan aktual akan sering mengikuti rekomendasi kami sejauh menyangkut perangkat lunak pembuatan formulir untuk dibeli. Kami memang merekomendasikan COTG untuk pelanggan ini karena kemampuan otomatisasi lain yang dikirimkan melalui plugin Alur Kerja hanya untuk kemudian menemukan batasan bentuk bangunan di Perancang

Bagaimana cara menampilkan dan menyembunyikan kotak centang di JavaScript?

Bagaimana cara menyembunyikan kotak centang di JavaScript?

Bagaimana cara menampilkan dan menyembunyikan kotak centang di HTML?

Bagaimana cara menampilkan kotak centang yang dicentang dalam JavaScript?