พิมพ์หน้านี้ - ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก

หัวข้อ: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 15:54:04

(http://image.ohozaa.com/i/dcf/4q9DfR.png)

เช่น ถ้าติ๊กตัวเลือกที่ 1 แล้วนำค่า 500 ไปบวกกับ 1000 ด้านบน

มีวิธีเขียนโค้ดยังไงหรอครับ

โค๊ด:

<div id="sum">1000</div>
<br>
<input type="checkbox" name="pay[]" value="" />ตัวเลือกที่ 1 <INPUT TYPE="text" NAME="payment[]" Value="500" size="5"><br>
<input type="checkbox" name="pay[]" value="" />ตัวเลือกที่ 2 <INPUT TYPE="text" NAME="payment[]" Value="1500" size="5"><br>
<input type="checkbox" name="pay[]" value="" />ตัวเลือกที่ 3 <INPUT TYPE="text" NAME="payment[]" Value="700" size="5">

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: @Roverpost ที่ 13 กุมภาพันธ์ 2015, 15:57:53

ใช้ Javascript ครับ

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 15:58:50

อ้างจาก: 2T^d ที่ 13 กุมภาพันธ์ 2015, 15:57:53

ใช้ Javascript ครับ

มีตัวอย่างโค้ดให้ดูไหมครับ

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: smapan ที่ 13 กุมภาพันธ์ 2015, 16:15:15

ลองดูครับ แบบนี้ใช้ที่ต้องการรึเปล่าครับ
http://www.madirish.net/11

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: sys2528 ที่ 13 กุมภาพันธ์ 2015, 16:16:58

อ้างจาก: smapan ที่ 13 กุมภาพันธ์ 2015, 16:15:15

ลองดูครับ แบบนี้ใช้ที่ต้องการรึเปล่าครับ
[url]http://www.madirish.net/11[/url]

เยี่ยมครับ ตามนั้นครับ นำไปประยุกต์ก็ได้แล้วครับ :wanwan003:

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: @Roverpost ที่ 13 กุมภาพันธ์ 2015, 16:18:36

ลองประยุกต์ดูนะครับ
http://jsfiddle.net/o9svrzyd/

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 16:31:03

อ้างจาก: smapan ที่ 13 กุมภาพันธ์ 2015, 16:15:15

ลองดูครับ แบบนี้ใช้ที่ต้องการรึเปล่าครับ
[url]http://www.madirish.net/11[/url]

ยังไม่ใช่ครับ แต่ก็ขอบคุณนะครับ

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 16:33:36

อ้างจาก: 2T^d ที่ 13 กุมภาพันธ์ 2015, 16:18:36

ลองประยุกต์ดูนะครับ
[url]http://jsfiddle.net/o9svrzyd/[/url]

ตรงโจทย์เลยครับ แต่เหลือแค่ว่าพอติ๊กแล้วมันจะบวกพอไม่ติ๊กจะให้มันลบออกด้วย ยังไงผมขอลองไปปรับใช้ก่อนนะครับ ขอบคุณครับ

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: p44n ที่ 13 กุมภาพันธ์ 2015, 16:35:13

ทำตัวอย่างให้ดูครับ

http://jsfiddle.net/p44n/kgkdgnu1/

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 16:40:47

อ้างจาก: p44n ที่ 13 กุมภาพันธ์ 2015, 16:35:13

ทำตัวอย่างให้ดูครับ

[url]http://jsfiddle.net/p44n/kgkdgnu1/[/url]

ขอบคุณครับ ผมปรับใช้ได้แบบนี้

โค๊ด:

<script type="text/javascript">
$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            var checkboxvalue = $(this).val();
            var sumvalue = $('#sum').html();
            var total = parseInt(checkboxvalue)   parseInt(sumvalue);
            $('#sum').html(total);
         }else{
            var checkboxvalue = $(this).val();
            var sumvalue = $('#sum').html();
            var total = parseInt(sumvalue) - parseInt(checkboxvalue);
            $('#sum').html(total);
         }
   });
});
</script>

ผมลืมบอกไปครับว่าค่าตรง checkbox ค่าของมันคือ ตัวเลือกที่ 1

โค๊ด:

<input type="checkbox" name="pay[]" value="ตัวเลือกที่ 1" />ตัวเลือกที่ 1 <INPUT TYPE="text" NAME="payment[]" Value="500" size="5"><br>
<input type="checkbox" name="pay[]" value="ตัวเลือกที่ 2" />ตัวเลือกที่ 2 <INPUT TYPE="text" NAME="payment[]" Value="1500" size="5"><br>
<input type="checkbox" name="pay[]" value="ตัวเลือกที่ 3" />ตัวเลือกที่ 3 <INPUT TYPE="text" NAME="payment[]" Value="700" size="5">

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: p44n ที่ 13 กุมภาพันธ์ 2015, 17:07:48

น่าจะผิดอันนะครับ

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: Surakrai ที่ 13 กุมภาพันธ์ 2015, 17:16:20

ตรง var checkboxvalue = $(this).val();

เปลี่ยนเป็น
var checkboxvalue = $(this).next().val();

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: Surakrai ที่ 13 กุมภาพันธ์ 2015, 17:28:44

เพิ่มเติมจากของท่าน p44n ครับ
http://jsfiddle.net/kgkdgnu1/1/

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 18:46:08

อ้างจาก: p44n ที่ 13 กุมภาพันธ์ 2015, 17:07:48

น่าจะผิดอันนะครับ

ครับ ผมเอาของท่าน 2T^d มาปรับ ส่วนของท่าน p44n ไม่ต้องปรับเลยครับ

หัวข้อ: Re: ติ๊ก checkbox แล้วนำค่าด้านหลังไปบวก
เริ่มหัวข้อโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 18:54:47

โค๊ด:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input[type='text']:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() { 
    $('input[type="checkbox"]').bind('click',function(){
        if($(this).is(':checked')){
            var checkboxvalue = document.getElementsByName("car_giveaway_price[0]")[0].value;
            var sumvalue = $('#sum').html();
            var total = parseInt(sumvalue) - parseInt(checkboxvalue);
            $('#sum').html(total);
         }else{
		 	var checkboxvalue = document.getElementsByName("car_giveaway_price[0]")[0].value;
            var sumvalue = $('#sum').html();
            var total =  parseInt(sumvalue)   parseInt(checkboxvalue);
            $('#sum').html(total);
		 }
   });
});
</script>
</head>

<body>
<div id="sum">10000</div>
<br>
<input type="checkbox" name="car_giveaway[0]" id="car_giveaway[0]" value="ตัวเลือกที่ 1" />ตัวเลือกที่ 1 <input type="text" name="car_giveaway_price[0]" id="car_giveaway_price[0]" value="500" size="5"><br>
<input type="checkbox" name="car_giveaway[1]" id="car_giveaway[1]" value="ตัวเลือกที่ 2" />ตัวเลือกที่ 2 <input type="text" name="car_giveaway_price[1]" id="car_giveaway_price[1]" value="1500" size="5"><br>
<input type="checkbox" name="car_giveaway[2]" id="car_giveaway[2]" value="ตัวเลือกที่ 3" />ตัวเลือกที่ 3 <input type="text" name="car_giveaway_price[2]" id="car_giveaway_price[2]" value="700" size="5">
</body>
</html>

ตัวอย่าง ถ้าติ๊กตัวเลือกที่ 1 แล้วเอาค่า 500 ไปลบกับ 10000

ช่วยผมหน่อยครับ นั่งแก้มาซักพักใหญ่แล้วไม่ได้เลย

ทดสอบกับเว็บนี้ได้ครับ http://www.tutorialrepublic.com/codelab.php

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: useronline ที่ 13 กุมภาพันธ์ 2015, 15:54:04