jquery에서 라디오 선택 추가, 빼기 및 삭제를 구현하는 방법

인터넷의 급속한 발전과 함께 프론트엔드 기술이 점점 더 주목을 받고 있으며, 그 중 jquery는 프론트엔드에서 일반적으로 사용되는 js 라이브러리 중 하나입니다. 웹사이트 개발 시 제품 선택 시 덧셈, 뺄셈, 삭제 작업을 수행해야 하는 경우가 많습니다. 이 글에서는 jquery를 사용하여 단일 선택 덧셈, 삭제를 구현하는 방법을 소개합니다.

1. 단일 선택 작업

제품을 선택할 때 일반적으로 단일 선택 작업을 수행해야 합니다. 즉, 여러 옵션 중 하나만 선택할 수 있습니다. 다음은 제품 카테고리를 예로 들어 jquery를 사용하여 단일 선택 작업을 구현하는 방법을 보여줍니다.

먼저 다음 코드와 같이 프런트 엔드 페이지의 입력 태그를 통해 여러 라디오 버튼을 생성합니다.

<div class="category">
  <input type="radio" name="radio" value="1"/>电脑
  <input type="radio" name="radio" value="2"/>手机
  <input type="radio" name="radio" value="3"/>电视
</div>

위 코드는 3개의 라디오 버튼을 생성하며 이름은 "radio"이고 값은 다음과 같습니다. 1, 2, 3. 이것의 목적은 jquery를 통해 선택된 값을 쉽게 얻는 것입니다. 라디오 버튼에 이름을 지정하지 않으면 jquery가 선택한 값을 가져올 수 없습니다.

다음으로 라디오 선택 작업을 구현하는 jquery 코드를 작성해야 합니다.

$('.category input').click(function(){
  $('.category input').attr('checked',false);
  $(this).attr('checked',true);
})

위 코드의 기능은 사용자가 라디오 버튼을 클릭할 때 모든 버튼의 "checked" 속성을 false로 설정한 다음 다음과 같이 설정하는 것입니다. 현재 버튼 "checked" 속성이 true로 설정되어 있습니다. 이렇게 하면 한 번에 하나의 라디오 버튼만 선택됩니다.

2. 덧셈과 뺄셈 연산

다음으로 jquery를 사용하여 덧셈과 뺄셈 연산을 구현하는 방법을 소개하겠습니다. 제품을 선택할 때 제품 수량을 선택해야 할 수 있으며, 이 경우 이를 달성하기 위해 추가 및 빼기 버튼을 사용해야 합니다. jquery를 사용하여 더하기 및 빼기 작업을 구현하는 방법을 보여주기 위해 수량 선택을 예로 들어 보겠습니다.

먼저 프런트 엔드 페이지에서 수량 선택 html 코드를 생성합니다.

<div class="quantity">
  <button class="minus">-</button>
  <input type="text" name="quantity" value="1" class="number" disabled>
  <button class="plus">+</button>
</div>

위 코드는 마이너스 버튼, 수량 입력 상자, 플러스 버튼을 포함하는 수량 선택 상자를 생성합니다. 수량 입력란의 초기값은 1 이며 비활성화되어 있어 사용자는 플러스, 마이너스 버튼을 통해서만 수량을 변경할 수 있습니다. 또한 각 버튼에는 jquery를 통한 바인딩을 용이하게 하기 위해 클래스 이름이 지정됩니다.

다음으로 덧셈과 뺄셈 연산을 구현하는 jquery 코드를 작성해야 합니다.

$('.quantity .minus').click(function(){
  var num = parseInt($('.quantity .number').val());
  if(num > 1){
    $('.quantity .number').val(num - 1);
  }else{
    alert('数量不能小于1');
  }
})
$('.quantity .plus').click(function(){
  var num = parseInt($('.quantity .number').val());
  $('.quantity .number').val(num + 1);
})

위 코드의 기능은 사용자가 빼기 버튼을 클릭하면 jquery를 통해 수량 입력 상자의 현재 값을 가져오는 것입니다. 가 1보다 크면 1만큼 줄입니다. 값이 1이면 계속해서 줄일 수 없으며 프롬프트 메시지가 나타납니다. 사용자가 더하기 버튼을 클릭하면 수량 입력 상자의 값이 직접 1 증가합니다. 이는 간단한 덧셈과 뺄셈 기능을 구현합니다.

3. 삭제 작업

마지막으로 jquery를 사용하여 삭제 작업을 구현하는 방법을 소개합니다. 제품 선택 시 제품을 삭제해야 할 경우가 있는데, 이 경우 삭제 버튼을 사용해야 합니다. jquery를 사용하여 삭제 작업을 구현하는 방법을 보여주기 위해 제품 목록을 예로 들어 보겠습니다.

먼저 프런트엔드 페이지에 상품 목록의 HTML 코드를 생성합니다.

<ul>
  <li>
    <img src="goods1.jpg">
    <h2>商品1</h2>
    <p>价格：99元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods2.jpg">
    <h2>商品2</h2>
    <p>价格：199元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods3.jpg">
    <h2>商品3</h2>
    <p>价格：299元</p>
    <button class="delete">删除</button>
  </li>
</ul>

위 코드는 상품 목록을 생성합니다. 각 상품에는 상품 사진, 상품 이름, 상품 가격, 삭제 버튼이 포함됩니다. 삭제 버튼에는 jquery를 통한 바인딩을 용이하게 하기 위해 클래스 이름도 제공됩니다.

다음으로 삭제 작업을 구현하는 jquery 코드를 작성해야 합니다.

$('.delete').click(function(){
  $(this).parent('li').remove();
})

위 코드의 기능은 사용자가 삭제 버튼을 클릭할 때 jquery를 통해 버튼의 상위 요소 li를 가져온 다음 삭제하는 것입니다. 그러면 제품 목록에서 삭제 작업이 구현됩니다.

결론

위 세 가지 사례의 시연을 통해 라디오 선택, 덧셈, 뺄셈, 삭제 등 일반적인 연산을 jquery를 사용하여 쉽게 구현할 수 있음을 알 수 있습니다. 또한 실제 응용 분야에서는 특정 요구 사항에 따라 더욱 개선하고 최적화할 수 있습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 jquery에서 라디오 선택 추가, 빼기 및 삭제를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!