javascript - jquery: remove the selected value if checkbox is unchecked - Stack Overflow

admin管理员组

文章数量:1023251

I'm displaying list of items with checkbox, if checkbox is checked the value of selected item is displayed in different div.

Now, if I uncheck the checkbox I should remove the items displayed in the div. Please help me how to fix this?

$('input[name="selectedItems1"]').click(function(){
            if (this.checked) {                   

            }else{                    
                //what should go here
            }
        });

I'm displaying list of items with checkbox, if checkbox is checked the value of selected item is displayed in different div.

Now, if I uncheck the checkbox I should remove the items displayed in the div. Please help me how to fix this?

$('input[name="selectedItems1"]').click(function(){
            if (this.checked) {                   

            }else{                    
                //what should go here
            }
        });

• javascript
• jquery
• html

Share Improve this question Follow edited May 15, 2015 at 19:47 HaveNoDisplayName 8,537106106 gold badges4040 silver badges5050 bronze badges asked May 13, 2015 at 15:03 AshgAshg 1311 silver badge44 bronze badges 1

• for that you need to share how you are adding the item – Milind Anantwar Commented May 13, 2015 at 15:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This example can help you:

html

<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>

jquery

$('input[name="selectedItems1"]').click(function(){ 
  if (this.checked) {
    var span = "<span id='" + this.value + "'>" + this.value + "</span>";
    $("#result").append(span);
  }else{
    $("#" + this.value).remove();//what should go here
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>

Here is a way to acplish your task. The following way also preserves the order in which the selected data is displayed.

var selectedItemsContainer = $('#selected');
var items = $('input[name="items"]');

items.on('change', function(){
  
  selectedItemsContainer.empty();
  var appendData = '';
  
  $.each(items, function(i, item)
    {
      if ($(item).prop('checked'))
        {
          appendData +=$(item).val() + ' ';
        }
    });
  
    selectedItemsContainer.append(appendData);
            
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="items" value="Data 1">Data 1
<input type="checkbox" name="items" value="Data 2">Data 2
<input type="checkbox" name="items" value="Data 3">Data 3
<br>
<div id="selected"></div>

I'm displaying list of items with checkbox, if checkbox is checked the value of selected item is displayed in different div.

Now, if I uncheck the checkbox I should remove the items displayed in the div. Please help me how to fix this?

$('input[name="selectedItems1"]').click(function(){
            if (this.checked) {                   

            }else{                    
                //what should go here
            }
        });

I'm displaying list of items with checkbox, if checkbox is checked the value of selected item is displayed in different div.

Now, if I uncheck the checkbox I should remove the items displayed in the div. Please help me how to fix this?

$('input[name="selectedItems1"]').click(function(){
            if (this.checked) {                   

            }else{                    
                //what should go here
            }
        });

• javascript
• jquery
• html

Share Improve this question Follow edited May 15, 2015 at 19:47 HaveNoDisplayName 8,537106106 gold badges4040 silver badges5050 bronze badges asked May 13, 2015 at 15:03 AshgAshg 1311 silver badge44 bronze badges 1

• for that you need to share how you are adding the item – Milind Anantwar Commented May 13, 2015 at 15:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This example can help you:

html

<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>

jquery

$('input[name="selectedItems1"]').click(function(){ 
  if (this.checked) {
    var span = "<span id='" + this.value + "'>" + this.value + "</span>";
    $("#result").append(span);
  }else{
    $("#" + this.value).remove();//what should go here
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>

Here is a way to acplish your task. The following way also preserves the order in which the selected data is displayed.

var selectedItemsContainer = $('#selected');
var items = $('input[name="items"]');

items.on('change', function(){
  
  selectedItemsContainer.empty();
  var appendData = '';
  
  $.each(items, function(i, item)
    {
      if ($(item).prop('checked'))
        {
          appendData +=$(item).val() + ' ';
        }
    });
  
    selectedItemsContainer.append(appendData);
            
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="items" value="Data 1">Data 1
<input type="checkbox" name="items" value="Data 2">Data 2
<input type="checkbox" name="items" value="Data 3">Data 3
<br>
<div id="selected"></div>

本文标签： javascriptjquery remove the selected value if checkbox is uncheckedStack Overflow