jQuery來基於複選框選擇改變跨度文本

我試圖改變基於我checkbox.here跨度文字是我的HTMLjQuery來基於複選框選擇改變跨度文本

<form method="get"> 
     <div class="kanDu"> 
      <p>Heading 1</p> 
      <input type="checkbox" />test1 
      <input type="checkbox" />test2 
      <input type="checkbox" />test3 
      <input type="checkbox" />test4 

     </div> 
     <div class="erDutil"> 
      <p> Heading 2</p> 
      <input type="checkbox" />test1 
      <input type="checkbox" />test2 
      <input type="checkbox" />test3 
     </div> 
     <div class="vilDu"> 
      <p>Heading 3</p> 
     <input type="checkbox" />test1 
      <input type="checkbox" />test2 
      <input type="checkbox" />test3 
      <input type="checkbox" />test4 
     </div> 
     <div class="inern_btn"> 
<p class="score">Score:<span class="getScore"></span><span>/</span><span class="totalScore"></span></p> 
      <input type="Submit" name="Submit" /> 
     </div> 

     </form>

我需要根據checkbox.the改變跨度元素文本具有類totalscore的跨度元素具有複選框總數的文本，並且getscopre跨度具有選中的複選框數量。

我想是這樣的

$(document).ready(function() { 

    var numberOfChecked = $('input:checkbox:checked').length; 
    var totalCheckboxes = $('input:checkbox').length; 
     $('.getScore').text(numberOfChecked); 
     $('.totalScore').text(totalCheckboxes); 

     });

複選框計數的總數得和它工作正常，但另一個不working.can提前任何一個建議一些help.thanks。

來源

2014-02-20 Arun

你在numberOfChecked得到什麼價值數這個代碼？ – Rohan

@Rohan得到的值是0 – Arun

爲了達到這個目的，你需要編寫一個函數，在每個複選框檢查/取消選中哪個應該更新numberOfChecked。 – SajithNair

嘗試添加thois代碼。它應該工作

$(document).ready(function() { 

     var numberOfChecked = $('input:checkbox:checked').length; 
     var totalCheckboxes = $('input:checkbox').length; 
     $('.getScore').text(numberOfChecked); 
     $('.totalScore').text(totalCheckboxes); 

     $("input[type=checkbox]").change(function() { 
      var numberOfChecked = $('input:checkbox:checked').length; 
      $('.getScore').text(numberOfChecked); 
     }); 
    });

來源

2014-02-20 06:07:02

下面是代碼

$('form').on('click', function(){ 
    $('.totalScore').text($('input:checked').length) 
    });

Fiddle Demo

來源

2014-02-20 06:07:12

$(document).ready(function() { 
    $('.totalScore').text($('input:checkbox').length); 
    $('.getScore').text($('input:checkbox:checked').length) 

    $(':checkbox').on('click', function() { 
     $('.getScore').text($('input:checkbox:checked').length); 
    }); 
})

DEMO

來源

2014-02-20 06:10:34 schnill

對於這個工作，你需要寫一個將被稱爲上功能每個複選框檢查/取消選中哪個將更新值。

檢查這個js小提琴http://jsfiddle.net/4UdYQ/

var numberOfChecked; 
$(document).ready(function() { 


    var totalCheckboxes = $('input:checkbox').length; 
    numberOfChecked = $('input:checkbox:checked').length; 
     $('.getScore').text(numberOfChecked); 
     $('.totalScore').text(totalCheckboxes); 

}); 

$('input[type=checkbox]').change(function() { 
    numberOfChecked = $('input:checkbox:checked').length; 
     $('.getScore').text(numberOfChecked); 
});

來源

2014-02-20 06:12:15 SajithNair

嘗試讓選中的複選框

var numberOfChecked = $("[type='checkbox']:checked").length;

來源

2014-02-20 06:13:58 chriz

jQuery來基於複選框選擇改變跨度文本

回答

相關問題