อยากทราบวิธีการทำให้ ส่วนของ checkbox หายไป เหมือนการการเปลี่ยนขนาดหน้าจอ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

อยากทราบวิธีการทำให้ ส่วนของ checkbox หายไป เหมือนการการเปลี่ยนขนาดหน้าจอ

โพสต์ที่ยังไม่ได้อ่าน โดย Ittichai_chupol »

ผมอยากทราบว่าจะมีวิธีการเขียน css อย่างเพื่อที่จะทำให้ ส่วนของ checkbox นั้นหายไป แบบไม่ใช้แค่การซ่อน

- ตอนนี้ผมได้เขียนส่วนการทำ checkbox ไว้ 2 แบบ คือ เอาไว้แสดงผลในจอโทรศัพ กับ ในจอคอมพิวเตอร์ ครับ
- โดยในจอโทรศัพนั้นจะมีการ ร่วมเอาหัวข้อและ ckeckbox อยู่ใน tag <dt> เดียวกัน
Selection_999(1919).png
Selection_999(1919).png (34.92 KiB) Viewed 1174 times

- แต่ในจอคอมนั้นจะมีการแยกออก ระหว่างหัวข้อ กับ ckeckbox
Selection_999(1920).png
โดยโคด HTML ที่ผมใช้เขียนจะมีประมาณนี้ครับ

โค้ด: เลือกทั้งหมด

<dl style="clear: left;">
    <dt style="margin-bottom: -5px;"><label for="mod_anonymous">{L_ANONYMUS}{L_COLON} 

            // แสดงน้าจอโทรศัพ
            <input  style=" width: 18px;  height: 16px;"  class="anonymous" type="checkbox" value="1" name="mod_anonymous"  tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span> </label></dt> 


//แสดงในจอคอมพิวเตอร์
    <dd>
        <input class="checkbox_anonymous" type="checkbox" style=" width: 18px;
               height: 16px;" value="1" name="mod_anonymous"  tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span>
 </dd>
</dl>
โดยโคด CSS ที่ผมใช้เขียนจะมีประมาณนี้ครับ

โค้ด: เลือกทั้งหมด

@media screen and (max-width: 700px) {
.hidden {display:block;}
.checkbox_anonymous {
        visibility: hidden;
        width: 18px;
        height: 16px;
    }
}

@media screen and (min-width:700px) {
   .hidden {display:block;}
    .anonymous {
        visibility: hidden;
        width: 18px;
        height: 16px;
    }
}
- ปัญหาที่จอก็คือว่า เมือส่ง mod_anonymous ไปใช้งานนั้น มีการส่งค่าที่ผิด เนื่องจาก ว่า จะมีส่วนที่ถูกซ่อนไว้นั้นเอง
- จึงอยากที่จะทำให้ส่วนที่ไม่ต้องการหายไป เวลาที่ แสดงผลในอีก รูปแบบ 1 ครับ
ขอให้วันนี้เป็นวันที่ดี
ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Re: อยากทราบวิธีการทำให้ ส่วนของ checkbox หายไป เหมือนการการเปลี่ยนขนาดหน้าจอ

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

โค้ด: เลือกทั้งหมด

<dl style="clear: left;">
    <dt style="margin-bottom: -5px;"><label for="mod_anonymous">{L_ANONYMUS}{L_COLON}
            <input  style=" width: 18px;  height: 16px;"  class="anonymous" type="checkbox" value="1" name="mod_anonymous"  tabindex="3" {S_ANONYMOUS_CHECKED}/> <br /><span class="gensmall">{L_ANONYMUS_EXPLAIN}</span> </label></dt>
    <dd>
     
   </dd>
</dl> 
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 79