点击按钮切换表单字段值（1/0）的jQuery实现问题

我来帮你搞定这个问题——你的代码已经实现了按钮样式的切换，但确实缺少了表单字段值的切换逻辑，下面是修改后的完整方案：

基于原jQuery代码的修改方案 #

你只需要在websiteBtn函数中添加几行代码，就能实现输入框值在0和1之间的切换：

<input type="text" name="website" id="websiteForm" value="0">
<span class="btn btn-outline-primary" id="websiteBtn" onClick="websiteBtn()">Website</span>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function websiteBtn(){
  // 简化样式切换：一次调用即可切换两个类
  $('#websiteBtn').toggleClass('btn-outline-primary btn-primary');
  
  // 获取输入框元素，切换其值
  const $input = $('#websiteForm');
  $input.val(currentVal => currentVal === '0' ? '1' : '0');
  
  // 可选：控制台打印当前值，方便调试
  console.log('输入框当前值:', $input.val());
}
</script>

关键修改点说明： #

• 样式切换优化：toggleClass支持同时传入多个类名，不用分开调用两次，代码更简洁。
• 值切换逻辑：利用jQuery的val()方法的函数式写法，直接根据当前值反向设置新值。注意输入框的value属性是字符串类型，所以判断时要用'0'和'1'，避免类型匹配问题。

原生JavaScript替代方案（无需jQuery） #

如果你的项目不想依赖jQuery，也可以用原生JS实现相同功能：

<input type="text" name="website" id="websiteForm" value="0">
<span class="btn btn-outline-primary" id="websiteBtn" onClick="websiteBtn()">Website</span>

<script>
function websiteBtn(){
  const btn = document.getElementById('websiteBtn');
  const input = document.getElementById('websiteForm');
  
  // 切换按钮样式
  btn.classList.toggle('btn-outline-primary');
  btn.classList.toggle('btn-primary');
  
  // 切换输入框值
  input.value = input.value === '0' ? '1' : '0';
  
  console.log('输入框当前值:', input.value);
}
</script>

这样修改后，每次点击按钮时，输入框的value会在0和1之间来回切换，同时按钮样式也会同步变化，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Sam Allen