改变与“"至“-"(JS/Jquery）

Changing value separation from "," to "-" (JS/Jquery)

本文关键字：quot Jquery JS 改变      更新时间：2023-09-26

我收到了一些HTML复选框的Jquery代码。从本质上讲，选中时，复选框的值会放在输入框中。当我取消选中该框时，该值将从输入中清除。但是，当您选中多个复选框时，一个"，"会分隔这些值有没有办法用"-"而不是"，"来分隔这些值我试着摆弄代码，但它只是破坏了代码。我是JS/Jquery的新手，所以如果这是一个简单的答案，我很抱歉。如果需要，我可以提供更多信息。这里有一个带"，"的工作JSFiddle：https://jsfiddle.net/m240Laka/25/

我的代码位于此处：

 var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box
    $none = $("#none"),
    $choice = $(".choice");
$choice.on("change", function () {
    var $this = $(this), //jquery selector for the changed input
    isThisChecked = $this.prop("checked"), //boolean true if the box is checked
    choiceSelectionsArray = $choiceDisplay.val().split(",").filter(function(e){return e !== ""}), //array of values that are checked
    isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //boolean true when $this value displayed
if (isThisChecked) {
    if (isThisValueInDisplayedSelection) {
        return false; //odd, the value is already displayed.  No work to do.
    } else {
        choiceSelectionsArray.push($this.val());
        $choiceDisplay.val(choiceSelectionsArray.join());
    }
} else { //box has been unchecked
    if (isThisValueInDisplayedSelection) {
        choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()})
        $choiceDisplay.val(choiceSelectionsArray.join());
    }
}
});
$none.on("change", function () {
   var $this = $(this),
   isThisChecked = $this.prop("checked");
if(isThisChecked){
    $choice.prop({
        disabled: true,
        checked : false
    });
    $choiceDisplay.val("");
}else{
    $choice.prop({disabled: false});
    return false;
}
});

在函数join()和split()中，需要传入所需的分隔符'-'。我建议创建一个您使用的局部变量，这样在需要时更容易更改它。

var $choiceDisplay = $("#choiceDisplay"), //jquery selector for the display box
    $none = $("#none"),
    $choice = $(".choice"),
    delimiter = '-';
$choice.on("change", function () {
    var $this = $(this), //jquery selector for the changed input
        isThisChecked = $this.prop("checked"), //boolean true if the box is checked
        choiceSelectionsArray = $choiceDisplay.val().split(delimiter).filter(function(e){return e !== ""}), //array of values that are checked
        isThisValueInDisplayedSelection = $.inArray($this.val(), choiceSelectionsArray) !== -1; //boolean true when $this value displayed
    if (isThisChecked) {
        if (isThisValueInDisplayedSelection) {
            return false; //odd, the value is already displayed.  No work to do.
        } else {
            choiceSelectionsArray.push($this.val());
            $choiceDisplay.val(choiceSelectionsArray.join(delimiter));
        }
    } else { //box has been unchecked
        if (isThisValueInDisplayedSelection) {
            choiceSelectionsArray = choiceSelectionsArray.filter(function(e){return e !== $this.val()})
            $choiceDisplay.val(choiceSelectionsArray.join(delimiter));
        }
    }
});

这是一把小提琴。

在$.join（）中添加分隔符字符串参数：

$choiceDisplay.val(choiceSelectionsArray.join("-"));

更新：

在$.split（）中添加相同内容

choiceSelectionsArray = $choiceDisplay.val().split("-")....
相关文章：