หากเลือกช่องทำเครื่องหมายให้ดำเนินการนี้


126

<p> #0099ffเมื่อฉันทำเครื่องหมายในช่องที่ผมอยากให้มันเปิด

เมื่อฉันยกเลิกการเลือกช่องทำเครื่องหมายฉันต้องการให้ยกเลิกการทำเช่นนั้น

รหัสที่ฉันมีจนถึงตอนนี้:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

1
"... เมื่อไม่ได้เลือกไว้ให้ปิดใช้งานฟังก์ชันเดียวกันนั้น" - ฟังก์ชันที่ส่งถึงจะ.click()ถูกเรียกใช้ในเหตุการณ์การคลิก ดังนั้นฉันไม่เข้าใจความหมายของคุณ "เปิดใช้งาน" และ "ปิดใช้งาน" หากเลือกช่องทำเครื่องหมายคุณสามารถเรียกใช้ฟังก์ชันa()ได้ แต่คุณจะต้องเขียนฟังก์ชั่นย้อนกลับเพื่อเรียกเมื่อช่องทำเครื่องหมายเป็นไม่ได้ตรวจสอบ ฉันสับสน.
jensgram

แน่นอนคุณสามารถ.bind()และ.unbind()เหตุการณ์ไปยังองค์ประกอบอื่นตามสถานะช่องทำเครื่องหมาย นั่นคือสิ่งที่คุณต้องการ?
jensgram

1
ขออภัยสำหรับการส่งสแปม แต่ฉันได้ทำตัวอย่างสิ่งที่ฉันกำลังพูดถึง
jensgram

1
ฉันรู้ว่านี่เป็นโพสต์เก่า แต่ตอนนี้ใช้ jQuery prop()สำหรับสิ่งที่คำถามนี้ต้องการที่จะใช้attr()สำหรับ; prop()วิธีการไม่ได้รับการสร้างขึ้นกลับมาแล้ว อย่างไรก็ตามคำตอบเกี่ยวกับthis.checkedอาจเป็นประโยชน์
trysis

คำตอบ:


235

ฉันจะใช้ .change()และthis.checked:

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

-

เกี่ยวกับการใช้this.checked
แอนดี้อีได้ดำเนินการเขียนที่ดีขึ้นเกี่ยวกับวิธีการที่เรามีแนวโน้มที่จะมากเกินไป jQuery: การใช้อำนาจที่น่ากลัวของ jQuery เพื่อเข้าถึงคุณสมบัติขององค์ประกอบ บทความโดยเฉพาะการปฏิบัติต่อการใช้งานของ.attr("id")แต่ในกรณีที่#checkbox เป็น<input type="checkbox" />องค์ประกอบที่เป็นปัญหาเหมือนกันสำหรับ$(...).attr('checked')(หรือแม้กระทั่ง$(...).is(':checked')) this.checkedกับ


48

ลองทำตามนี้

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

บางครั้งเราใช้ jquery มากเกินไป หลายสิ่งสามารถทำได้โดยใช้ jquery กับ javascript ธรรมดา


34

อาจเกิดขึ้นได้ว่า "this.checked" เป็น "on" เสมอ ดังนั้นฉันขอแนะนำ:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

ในกรณีของฉันฉันเพิ่งเปลี่ยนเป็น$(':checkbox')เพื่อให้มันใช้งานได้;)
Pathros

21

จะดีกว่าถ้าคุณกำหนดคลาสด้วยสีอื่นจากนั้นคุณจะเปลี่ยนคลาส

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

ด้วยวิธีนี้โค้ดของคุณจะสะอาดกว่าเพราะคุณไม่จำเป็นต้องระบุคุณสมบัติ css ทั้งหมด (สมมติว่าคุณต้องการเพิ่มเส้นขอบสไตล์ข้อความหรืออื่น ๆ ... ) แต่คุณแค่เปลี่ยนคลาส


4
+1 สำหรับโซลูชันทั่วไป ไม่มีเหตุผลที่จะทำ$('#checkbox').attr('checked')อย่างไรก็ตามหากเราทราบว่า#checkbox เป็นช่องทำเครื่องหมาย (หากไม่ใช่แสดงว่า ID นั้นค่อนข้างทำให้เข้าใจผิด) this.checkedจะทำ.
jensgram

@jensgram @fcalderan +1 ขอบคุณสำหรับคำแนะนำ! ฉันไม่เคยเห็น toggleClass พร้อมสวิตช์ ฉันกำลังลบโพสต์ของฉันเนื่องจากไม่มีประโยชน์ ขออภัยที่จู้จี้จุกจิกมาก แต่ฉันคิดว่าคำตอบนี้จะสมบูรณ์แบบ 100% หากไม่มีการเลือก "#checkbox" สองครั้ง: อาจใช้ $ (this) แทน? หรือวิธีแก้ปัญหาของ jensgram?
โจมตี

@attack แน่นอนคุณสามารถแคชองค์ประกอบของคุณก่อนที่จะใช้ (ดูรหัสตอนนี้) this.checked เร็วกว่า $ (.. ). attr ('checked')

4

ฉันพบวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับการจัดการกับปัญหาของช่องทำเครื่องหมายที่ไม่ได้เลือกหรือทำเครื่องหมายที่นี่คืออัลกอริทึมของฉัน ... สร้างตัวแปรส่วนกลางเพื่อบอกว่าvar check_holder

check_holderมี 3 สถานะ

  1. สถานะที่ไม่ได้กำหนด
  2. 0 สถานะ
  3. 1 รัฐ

หากช่องทำเครื่องหมายถูกคลิก

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

รหัสด้านบนสามารถใช้ได้ในหลาย ๆ สถานการณ์เพื่อดูว่ามีการเลือกช่องทำเครื่องหมายหรือไม่ได้เลือกไว้ แนวคิดเบื้องหลังคือการบันทึกสถานะช่องทำเครื่องหมายในตัวแปรกล่าวคือเมื่อเปิดปิด ฉันหวังว่าตรรกะจะสามารถใช้แก้ปัญหาของคุณได้


1
วิธีแก้ปัญหานั้นบ้าจริง แต่ไม่ใช่ในทางที่ดี ใช่ตัวแปรทั่วโลกสามารถช่วยคุณแก้ปัญหาได้ในวันนี้ แต่เกือบจะกลายเป็นปัญหาสำหรับคุณในวันพรุ่งนี้ พยายามหลีกเลี่ยงหากทำได้ซึ่งเป็น 99% ของเวลา ทำให้เป็นไปไม่ได้ที่จะให้เหตุผลเกี่ยวกับรหัสของคุณโดยไม่ต้องกังวลเกี่ยวกับสภาวะโลก ตัวแปรระดับโลกตัวหนึ่งอาจดูไร้เดียงสา แต่อย่างรวดเร็วมันกลายเป็นสิบจากหลายร้อย เคยไปมาแล้วเห็นแล้วไม่สวยเลย
bijancn

3

ตรวจสอบรหัสนี้:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>


1

เป็นไปได้ว่าคุณสามารถใช้รหัสนี้เพื่อดำเนินการตามที่มีการเลือกหรือไม่เลือกช่องทำเครื่องหมาย

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});


0

การใช้งานที่เหมาะสมที่สุด

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

การสาธิต

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>


0

ทำไมไม่ใช้เหตุการณ์ในตัว?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.