Geek asks and answers

JQuery Flags and Text Fields

I have 5 flags in the class check (with the name cb1, cb2, cb3, ...) and 5 corresponding text fields in the class text (with the name tf1, tf2, tf3, ...). When one or several checkboxes are checked, I want to count all the checked checkboxes and put the amount in the text fields that correspond when the button is clicked.

Example: If cb1 and cb3 are checked than tf1, and tf3 will have a value of 2.

So far I am counting all checked flags:

$(':button').click(function() {
    total= $('.check:checked');
    count=total.length;
});

But I cannot figure out how to get "count" in the corresponding text fields. Any help is appreciated!

PS I have different flags and text fields in different classes, so it is important that they refer to the class.

+3
source share
3 answers

, - :

$(':button').click(function() {
    var total= $('.check:checked'),
        count=total.length;

    $('.text').val(function() {
       return $('#' + this.id.replace(/tf/,'cb')).is(':checked') ? count : 0;
    });
});

text , count, 0 , . , , , , 0 '' ( ).

( .val(), doco.)

, var .

: http://jsfiddle.net/aBSNy/

+2

:

HTML:

<div>
    <input type="checkbox" name="check1" value="" />
    <input type="text" name="text1" value="" data-count-for="check1" />
</div>
...(other checkboxes)...
<div>
    <input id="trigger" name="trigger" type="button" value="Click me" />
</div>​

JavaScript ( jQuery 1.7 +):

jQuery("#trigger").on('click', function(event){
    event.preventDefault();
    // select checkboxes:
    var checkboxes = jQuery(':checkbox:checked');
    checkboxes.each(function(){
        // find text input assigned to each checked checkbox:
        var selector = '[data-count-for="' + jQuery(this).attr('name') + '"]';
        // assign it a total number of previously found checkboxes
        jQuery(selector).val(checkboxes.length);
    });
});​

. : http://jsfiddle.net/EMhuw/1/

+2

Make sure that the text field and the corresponding flags have an identifier and a name that match, so you can easily link them together, and then skip the collection of checked flags and use the attribute namefrom the flag as idfor a text field, for example:

JavaScript:

// your already-computed total
count = total.length;

// loop through the collection of checked checkboxes
$('.check:checked').each( function() {

    // assign the total to each textarea where the id matches a checkbox name attr
    $('#'+$(this).attr("name")).val(total);

});

HTML:

<input class="check" type="checkbox" name="check1" />
<input class="check" type="checkbox" name="check2" />
<input class="check" type="checkbox" name="check3" />
<input class="check" type="checkbox" name="check4" />
<input class="check" type="checkbox" name="check5" />

<textarea id="check1"></textarea>
<textarea id="check2"></textarea>
<textarea id="check3"></textarea>
<textarea id="check4"></textarea>
<textarea id="check5"></textarea>

Using the mapping, enumerated identifiers / names, it will also be easier for you to create additional flags and text fields on the server side using the loop construct; thus, it can scale much more than just 5 elements.

+1
source

More articles: