Eliminate specified text from a group of buttons

Question

Eliminate specified text from a group of buttons

My task involves a set of buttons that behave in a specific way when clicked. By clicking on a button, the text "selected" is added to its existing value.

If one button is clicked, I want any other buttons with the text "selected" to have this text removed.

The desired functionality can be achieved by iterating through all the buttons within the specified area (all with the class of searchResult) and removing the text "selected" from each button if it is present.

Below is the code snippet for each button:

<input type="button" class="searchResult" onclick="$(\'#usersToSend > *\').css(\'background-color\', \'#fff\');
var oldValue = this.value;
this.value=\'(selected) \' + oldValue; this.style.backgroundColor = \'#51CA3E\';
document.getElementById(\'hiddenUserFlag\').value = \''.$row['id'].'\';"
value="'.$row['username'].'">

Pay attention to this part of the code:

$(\'#usersToSend > *\').css(\'background-color\', \'#fff\');
var oldValue = this.value;
this.value=\'(selected) \' + oldValue;
this.style.backgroundColor = \'#51CA3E\';

javascript jquery html css button

Answer 1

Answer №1

To change the text of selected buttons, you can utilize the :contains() selector along with the text() method in the following manner:

$("button").click(function(){
  $("button:contains('selected')").text(function(){
    return this.innerHTML.replace("selected","");
  })
  this.innerHTML+= "selected";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button-</button>
<button>button-</button>
<button>button-</button>

Update: Please note that the above code will not function correctly for <input> buttons. In such cases, you should use the .filter() and .val() methods as demonstrated below:

$(":input").click(function(){
  $(":input").filter(function(){
    return this.value.indexOf("selected") > 0
  }).val(function(){
    return this.value.replace("selected","");
  })
  this.value+= "selected";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button-" />
<input type="button" value="button-" />
<input type="button" value="button-" />

Answer 2

To change the text of selected buttons, you can utilize the :contains() selector along with the text() method in the following manner:

$("button").click(function(){
  $("button:contains('selected')").text(function(){
    return this.innerHTML.replace("selected","");
  })
  this.innerHTML+= "selected";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button-</button>
<button>button-</button>
<button>button-</button>

Update: Please note that the above code will not function correctly for <input> buttons. In such cases, you should use the .filter() and .val() methods as demonstrated below:

$(":input").click(function(){
  $(":input").filter(function(){
    return this.value.indexOf("selected") > 0
  }).val(function(){
    return this.value.replace("selected","");
  })
  this.value+= "selected";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button-" />
<input type="button" value="button-" />
<input type="button" value="button-" />

Eliminate specified text from a group of buttons

Answer №1

Similar questions

Guide to aligning form data with Bootstrap

Limit the selection to just one element in a v-for loop in VueJS

Wait for another user keypress event in jQuery after a 0.5 second delay

What is the process for eliminating the hover effect on a Bootstrap button?

Leveraging JavaScript for setting an ASP.net Dropdownlist

Iterate through a collection of files in an asynchronous manner by leveraging promises and defer statements

When utilizing the Jquery Upload File Plugin, it is important to note that the collection IEnumerable<HttpPostedFileBase> may not include any

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

How can I retrieve the URL of images listed in my CSS file using Python?

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

Occupying room while using display: none in <td>

Exploring through angular.js with the use of identifiers

What is the best way to center images horizontally in CSS and HTML?

Combining synchronous and asynchronous code in JavaScript with Node.js and MongoDB

Discovering if a checkbox is checked using jQuery - a simple guide

What are the steps to utilizing the $document service in AngularJS?

Different ways to prevent invalid entries in an input field with type datetime-local

Utilizing AJAX to amplify the worth of plupload's echo capabilities

Finding the latitude and longitude coordinates of a point at a specific distance from another using Node.js or JavaScript

Prevent the automatic inflation of bubbles on the D3 World Map