GORAGOD.com

freelance, web developer, web designer, hosting, domain name

ใช้ลิงค์เพื่อเลือก checkbox

มีคำถามจากบอร์ดว่า จะทำไง เมื่อคลิกที่ลิงค์แล้ว checkbox ที่เกี่ยวข้องกันจะ เช็คตาม สามารถทำได้ด้วยการใช้ Javascript ครับ

หลักการก็คือใช้ tag a เมื่อทำการคลิกลิงค์ ให้ไปเรียก Javascript เพื่อทำการเลือก checkbox แทน

แบบที่ 1 กดลิงค์เพื่อสลับตัวเลือก

ตัวที่ 1      

ตัวที่ 2      

<script type="text/javascript">
function setcheck1(q) {
    var check = document.getElementById(q + 'y').checked;
    document.getElementById(q + 'y').checked = check ? false : true;
    document.getElementById(q + 'n').checked = check ? true : false;
}
</script>

<p><a href="javascript:setcheck1('ch1')" rel="nofollow">ตัวที่ 1</a><input checked="checked" id="ch1y" type="checkbox"><input id="ch1n" type="checkbox"></p>
<p><a href="javascript:setcheck1('ch2')" rel="nofollow">ตัวที่ 2</a><input checked="checked" id="ch2y" type="checkbox"><input id="ch2n" type="checkbox"></p>


แบบที่ 2 กดลิงค์เพื่อเลือกของใครของมัน วิธีนี้ผลลัพท์จะคล้ายๆกับการใช้ label ร่วมกับ radio

   ใช่      ไม่ใช่

   ใช่      ไม่ใช่

<script type="text/javascript">
function setcheck2(q, c) {
    document.getElementById(q + 'a').checked = c ? true : false;
    document.getElementById(q + 'b').checked = c ? false : true;
}
</script>

<p><input checked="checked" id="ch1a" type="checkbox"><a href="javascript:setcheck2('ch1',true)" rel="nofollow">ใช่</a><input id="ch1b" type="checkbox"><a href="javascript:setcheck2('ch1',false)" rel="nofollow">ไม่ใช่</a></p>
<p><input checked="checked" id="ch2a" type="checkbox"><a href="javascript:setcheck2('ch2',true)" rel="nofollow">ใช่</a><input id="ch2b" type="checkbox"><a href="javascript:setcheck2('ch2',false)" rel="nofollow">ไม่ใช่</a></p>
0SHAREFacebookLINE it!
^